如何在jQuery中激活当前选项_JavaScript

如何激活当前选项并禁用其他选项？ 我正在尝试这个： :

我是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(); 
    });
})();

您可以通过使用通用类和DRY原理来简化代码。 这完全不需要维护一个对象来存储对单独标识的下拉列表的引用以及相关的父元素。 这也意味着单击处理程序可以处理任意数量的下拉菜单。 尝试这个：

$(function () {
    $('.dropdown-parent').click(function () {
        var $parent = $(this);
        $parent.toggleClass('bg').siblings().removeClass('bg');

        var $dropdown = $parent.next('.dropdown');
        $('.dropdown').not($dropdown).hide();
        $dropdown.toggle($dropdown.is(':hidden'));
    });
});

<div class="col-lg-2 inner dropdown-parent">
     <h6 class="right list-item">Hendrik de Zeeuw</h6>
</div>
<div class="dropdown">
    <div class="col-lg-3">
        <p class="dropdown-header">Gegevens wijzijen</p>
    </div>
</div>

我对您的标记进行了一些更改，例如：

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' ，在'dropdown'列表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();
    });
});

如何在jQuery中激活当前选项

问题描述

1楼

2楼