更改DIV标签功能,如select-option？

Question

我有以下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类型一样直观地改变它就足够了.

任何帮助赞赏.谢谢.

Answer 1

你可以试试这个:http://jsfiddle.net/VRjfm/

$('.categories').prepend('<span>select options</span>');

$('.categories').click(function(){
  $('div',this).slideToggle();
  $('.categories span').html('select options');
});

$('.category').click(function(e){
  e.stopPropagation(); // <--this will stop the event bubbling to its parent.
  $('.category').slideToggle();
  $('.categories span').html($(this).text());
});

Answer 2

使用以下 JavaScript 代码。这将解决你的问题

JS 斌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();


        });