Question

如何激活当前选项并禁用其他选项？我在尝试这个：https://jsfiddle.net/jpr33wnn/2/

我是jQuery的新手并且卡住了。请告诉我这样做是否错误。感谢。

<div class="col-lg-2 inner" id="dropdown1-parent">
    <h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown" id="dropdown1" style="display:none;">
    <div class="col-lg-3">
        <p class="dropdown-header">
            Gegevens wijzijen
        </p>
    </div>
</div>

<div class="col-lg-2 inner" id="dropdown2-parent">
    <h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown" id="dropdown2" style="display:none;">
    <div class="col-lg-3">
        <p class="dropdown-header">
            Gegevens wijzijen
        </p>
    </div>
</div>

.bg {
    color: red;
}

(function() {
    var object = {
        dropdown1: $('#dropdown1'),
        dropdown2: $('#dropdown2'),
        dropdown1parent: function() {
            if (object.dropdown1.is(':hidden')) {
                object.dropdown1.show();
            }
        },
        dropdown2parent: function() {
            if (object.dropdown2.is(':hidden')) {
                object.dropdown2.show();
            }
        }
    }

    $('#dropdown1-parent').on('click', function() {
        $(this).addClass('bg');
        object.dropdown1parent(); 
    });

    $('#dropdown2-parent').on('click', function() {
        $(this).addClass('bg');
        object.dropdown2parent(); 
    });
})();

Answer 1

我的标记有点像：

HTML：

<div class="col-lg-2 inner ddparent" data-target='dropdown1' id="dropdown1-parent">
     <h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown" id="dropdown1" style="display:none;">
    <div class="col-lg-3">
        <p class="dropdown-header">Gegevens wijzijen</p>
    </div>
</div>

向父级添加了一个班级名称'ddparent'，向下拉列表div添加了'dropdown'，并为特定的属性data-target添加了一个属性。

这是你想要的吗？

$(function () {
    $('.ddparent').on('click', function () {
        var target = $(this).data('target');
        $(this).addClass('bg').siblings('.ddparent').removeClass('bg');
        $('#'+target).show().siblings('.dropdown').hide();
    });
});

An updated fiddle.

如何在jquery中激活当前选项

1 个答案: