我有以下
HTML结构
<div class="categories">
<div class="category">1</div>
<div class="category">2</div>
<div class="category">3</div>
</div>
我想让这个结构函数像SELECT / OPTION,(我无法更改标签)
我尝试在父DIV上应用TOGGLE,但只打开和关闭DIV容器,它不会改变像SELECT-OPTION这样的功能.
编辑：
只需像下拉SELECT-OPTION类型一样直观地更改它就足够了.
任何帮助赞赏.谢谢.
解决方法
使用以下javascript代码.哪个会解决你的问题
JS Bin http://jsbin.com/utoyej/43/edit
//This is while page load showing first element
jQuery('.category').addClass('inactive').hide();
jQuery('.category:first').addClass('active').removeClass('inactive').show();
//Showing all option
jQuery('.categories').mouSEOver(function(){
jQuery('.category').show();
});
//Showing selected option
jQuery('.categories').mouseleave(function(){
jQuery('.categories .inactive').hide();
});
//Onclick making the option active
jQuery('.category').click(function(){
jQuery('.category').addClass('inactive').removeClass('active');
jQuery(this).addClass('active').removeClass('inactive');
jQuery('.categories .inactive').hide();
});
