更改 DIV 标签功能，如选择选项？

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

使用以下 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();


        });

Answer 2

jsFiddle DEMO

编辑：我修改了 jsFiddle 以在 div 有新选择后显示 自定义标签。

对于一个纯 JavaScript 的解决方案，这个 jsFiddle 使用了一个simple plugin，具有出色的动画效果和配置设置。

HTML：

  <div class="categories" id="examplePanel1" style="position:absolute; width:150px; height:75px; top:20px; left:0px; background:#a6bbcd; text-align:center; overflow:hidden;">
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); dark(); return false;">1 - Dark</div>
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); light(); return false;">2 - Light</div>
    <div class="category" onclick="slideExample1('examplePanel1', 'exampleHeader1'); resetLabel1(); image(); return false;">3 - Image</div>
  </div>

JavaScript：

// Div 1 choice: Show purple color via image.
function light() {
  document.getElementById('theBox').style.backgroundImage = "url(http://placehold.it/100x100/FFFF99&text=Light)";
}

// Div 2 choice: Show yellow color via image.    
function dark() {
  document.getElementById('theBox').style.backgroundImage = "url(http://placehold.it/100x100/333399&text=Dark)";
}

// Div 3 choice: Show image
function image() {
  document.getElementById('theBox').style.backgroundImage = "url(http://www.gravatar.com/avatar/66cc4497ef4e7a711a1f83e6a74cfea1?s=100&d=identicon&r=PG)";
}

Original Tutorial
Panel Animation and Tutorial

如果您喜欢 jsFiddle，请查看 Panel Animation 链接，通过配置查看许多不同类型的动画。

Answer 3

我已经完成了以下操作：

HTML 部分：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="dd" class="select-wrapper">--- Select ---
<div class="categories">
 <div class="category">1</div>
 <div class="category">2</div>
 <div class="category">3</div>
</div>

CSS 部分：

.select-wrapper {
    /* Size & position */
    position: relative;
    width: 200px;
    margin-top: 25px;
    margin-left: 25px;
    padding: 12px 15px;

    /* Styles */
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor: pointer;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.select-wrapper:after { /* Little arrow */
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #4cbeff transparent;
}

.select-wrapper .categories {
    /* Size & position */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* Styles */
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-bottom: none;
    list-style: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Hiding */
    max-height: 0;
    overflow: hidden;
}


.select-wrapper .categories div {
    display: block;
    text-decoration: none;
    color: #333;
    padding: 10px;
    transition: all 0.3s ease-out;
    border-bottom: 1px solid #e6e8ea;
}


/* Hover state */

.select-wrapper .categories div:hover {
    color: #57a9d9;
}

/* Active state */

.select-wrapper.active {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.select-wrapper.active:after {
    border-color: #82d1ff transparent;
}

.select-wrapper.active .categories {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

.select-wrapper:focus {
    border-radius: 5px 5px 0 0;
    background: #4cbeff;
    box-shadow: none;
    border-bottom: none;
    color: white;
}

.select-wrapper:focus:after {
    border-color: #82d1ff transparent;
}

.select-wrapper:focus .categories {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    max-height: 400px;
}

jQuery部分：

function DropDown(el) {
        this.dd = el;
        this.initEvents();
    }
    DropDown.prototype = {
        initEvents : function() {
            var obj = this;

            obj.dd.on('click', function(event){
                $(this).toggleClass('active');
                event.stopPropagation();
            }); 
        }
    }

    $(function() {

        var dd = new DropDown( $('#dd') );

        $(document).click(function() {
            // all dropdowns
            $('.select-wrapper').removeClass('active');
        });

    });

查看实际效果：http://jsfiddle.net/john_rock/LhUsc/

我认为这可以帮助您解决问题。

Answer 4

你可以试试这个：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 5

您可以在内部 ('.catefory') div 上添加点击事件，并在那里捕获“选定”值。

例如：

var selectedValue = '';

$('.category').click(function () {
  selectedValue = $(this).text();
  $('.categories').hide(); /* if you want to hide the options panel */ 
});