Question

我已经制作了自定义选择菜单

    <span class="depend">
        <div class="col-md-3 col-sm-3 car-finder-form__input-value" data-select-dropdown=".finder-form--one">
            <a href="javascript:void(0);">Select 1</a>
        </div>
        <div class="col-md-3 col-sm-3 finder-form__input-value" data-select-dropdown=".finder-form--two">
            <a href="javascript:void(0);">Select 2</a>
        </div>
        <div class="col-md-3 col-sm-3 finder-form__input-value"  data-select-dropdown=".finder-form--three">
            <a href="javascript:void(0);">Select 3</a>
        </div>
     </span>

这是下拉列表

<div class="row finder-form__dropdown finder-form--one hide">
        <div class="col-xs-12">
            <div class="row finder-form__dropdown-list">
                <a href="">bla bla</a>
            </div>      
        </div>
    </div>
<div class="row finder-form__dropdown finder-form--two hide">
        <div class="col-xs-12">
            <div class="row finder-form__dropdown-list">
                <a href="">bla bla</a>
            </div>      
        </div>
    </div>
<div class="row finder-form__dropdown finder-form--three hide">
        <div class="col-xs-12">
            <div class="row finder-form__dropdown-list">
                <a href="">bla bla</a>
            </div>      
        </div>
    </div>

我的jQuery目前看起来像这样

jQuery("div.finder-form__input-value").on("click", function(){
                        var drpdwn = $(this).data("select-dropdown");
                        $(drpdwn).toggleClass("hide");
                    });

jQuery在点击时取消隐藏第一个下拉菜单。并在点击时再次隐藏它。

但是当我点击第二个下拉列表时，如何让它关闭第一个下拉列表？点击第3个时关闭第2个下拉列表？关闭第2和第3，当我点击第1个？

Answer 1

假设元素默认使用类.hide，您可以按如下方式更改jQuery：

jQuery("div.finder-form__input-value").on("click", function(){
  $("div:not(.hide)").addClass("hide"); /* hides the menu that's open */
  var drpdwn = $(this).data("select-dropdown");
  $(drpdwn).toggleClass("hide");
});

Answer 2

我希望我能正确理解这个问题，我想你想要打开一个下拉列表，然后点击其余部分让它们关闭。为此，您需要将hide类应用于all，然后将其中一个打开并单击。

if (window.performance) {
  console.info(performance.navigation.type); 
}

工作小提琴：https://jsfiddle.net/nzynxjgj/

Answer 3

使用:not隐藏data-select-dropdown中没有课程的所有下拉列表，然后切换选定的下拉列表

＆＃13;

jQuery("div.finder-form__input-value").on("click", function() {
  var drpdwn = $(this).data("select-dropdown");
  $('.finder-form__dropdown:not(' + drpdwn + ')').addClass('hide');
  $(drpdwn).toggleClass("hide");
});

＆＃13;

.hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="depend">
        <div class="col-md-3 col-sm-3 finder-form__input-value" data-select-dropdown=".finder-form--one">
            <a href="javascript:void(0);">Select 1</a>
        </div>
        <div class="col-md-3 col-sm-3 finder-form__input-value" data-select-dropdown=".finder-form--two">
            <a href="javascript:void(0);">Select 2</a>
        </div>
        <div class="col-md-3 col-sm-3 finder-form__input-value"  data-select-dropdown=".finder-form--three">
            <a href="javascript:void(0);">Select 3</a>
        </div>
     </span>


<div class="row finder-form__dropdown finder-form--one hide">
  <div class="col-xs-12">
    <div class="row finder-form__dropdown-list">
      <a href="">bla bla one</a>
    </div>
  </div>
</div>
<div class="row finder-form__dropdown finder-form--two hide">
  <div class="col-xs-12">
    <div class="row finder-form__dropdown-list">
      <a href="">bla bla tow</a>
    </div>
  </div>
</div>
<div class="row finder-form__dropdown finder-form--three hide">
  <div class="col-xs-12">
    <div class="row finder-form__dropdown-list">
      <a href="">bla bla three</a>
    </div>
  </div>
</div>

＆＃13;

Answer 4

但是当我点击第二个下拉列表时，如何让它关闭第一个下拉列表？点击第3个时关闭第2个下拉列表？关闭第2和第3，当我点击第1个？

我不确定你为什么会这样做。但是，您必须稍微调整jQuery代码以区分单击哪个元素并决定隐藏哪些元素。

$("div.finder-form__input-value").on("click", function(){
    const dd = $(this).data("select-dropdown");
    // Here dd will contain the class name of the dropdown.

    if( dd == ".finder-form--one" ) {
        // Clicked first => close second and third.
        $(dd).toggleClass("hide");
        $(".finder-form—two").addClass("hide");
        $(".finder-form—three").addClass("hide");
    } else if( dd == ".finder-form--two" ) {
        // Clicked second => close first.
        $(".finder-form—one").addClass("hide");
        $(dd).toggleClass("hide");
    } else if( dd == ".finder-form--three" ) {
        // Clicked third => close second.
        $(".finder-form—two").addClass("hide");
        $(dd).toggleClass("hide");
    }
});

Answer 5

我会做这样的事情：

假设您在菜单中有3个div，并且对于菜单中的每个div，您想要一个下拉菜单（我将在菜单和下拉菜单中使用div作为elemtnts）：

<div class='menu-wrapper'>

    <div class='firstChoice'><div class='firstDRDWN'>bla bla</div><div>
    <div class='secondChoice'><div class='secondDRDWN'>bla bla</div><div>
    <div class='thirdChoice'><div class='thirdDRDWN'>bla bla</div><div>

</div>

现在你的jQuery应该是：

$( document ).ready(function() {

/*    HIDE ALL OF THE DROP DOWNS WHEN THE PAGE LOADS    */

$('.firstDRDWN').hide();
$('.secondDRDWN').hide();
$('.thirdDRDWN').hide();

/*   NOW SET THE FUNCTION FOR EACHE OF THE ELEMENTS IN YOUR MENU    */

    $('.firstChoice')on('click', function(){

        $('.firstDRDWN').show();
        $('.secondDRDWN').hide();
        $('.thirdDRDWN').hide();

    });

    $('.secondChoice')on('click', function(){

        $('.firstDRDWN').hide();
        $('.secondDRDWN').show();
        $('.thirdDRDWN').hide();

    });

    $('.thirdChoice')on('click', function(){

        $('.firstDRDWN').hide();
        $('.secondDRDWN').hide();
        $('.thirdDRDWN').show();

    });
}

这里你单独引用每个按钮，并触发将隐藏除了单击之外的所有下拉的功能，这些功能将被显示。

隐藏和取消隐藏相关的下拉菜单

5 个答案: