Question

我想制作一个类似本网站的下拉菜单。我想做三件事。

点击即可显示下拉列表。
一次只显示一个下拉列表，因此单击另一个下拉链接将删除显示下拉列表并添加您单击的下拉列表。
在单击同一下拉链接或在下拉列表外单击时删除显示的下拉列表。

我不确定是否需要插件，或者最好的方法是通过编写自己的代码来创建它这是我的代码，它运行良好，但唯一的问题是，当点击相同的下拉链接时，它不会删除显示的下拉列表。

	$('a#menu1').click(function() {
  	$("div#1").show();
  });
  $('a#menu2').click(function() {
  	$("div#2").show();
  });
   $('a#menu3').click(function() {
  	$("div#3").show();
  });

$(document).mouseup(function (e)
{
    var container = new Array();
    container.push($('.display_menu1'));
    container.push($('.display_menu2'));
    container.push($('.display_menu3'));
    
    $.each(container, function(key, value) {
        if (!$(value).is(e.target) // if the target of the click isn't the container...
            && $(value).has(e.target).length === 0) // ... nor a descendant of the container
        {
            $(value).hide();
        }
    });
});

div.body {
  background-color: white;
  width: 100%;
  height: 400px;
  border: 1px solid grey;
}

div.display_menu1 {
  display: none;
}

div.display_menu2 {
  display: none;
}

div.display_menu3 {
  display: none;
}

ul {
  margin: 0 0 30px 0;
  padding: 0px;
}

li {
  display: inline-block;
}

a.display {
  display: inline-block;
  background-color: lightblue;
  padding: 10px 20px;
  text-decoration: none;
}

div.display {
  background-color: grey;
  width: 200px;
  height: 100px;
}

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="body">
  <ul>
    <li>
      <a href="#" method="POST" id='menu1' class="number">Menu 1</a>
    </li>
    <li>
      <a href="#" method="POST" id='menu2' class="number">Menu 2</a>
    </li>
    <li>
      <a href="#" method="POST" id='menu3' class="number">Menu 3</a>
    </li>
  </ul>
  <div id="1" class="display display_menu1">
    This is dropdown-menu 1!
  </div>
  <div id="2" class="display display_menu2">
    This is dropdown-menu 2!
  </div>
  <div id="3" class="display display_menu3">
    This is dropdown-menu 3!
  </div>

</div>
</body>

Answer 1

好处是不使用Ids的类。所以在我的下一个例子中，我使用data属性并对所有div使用相同的类

$('a[data-menu]').click(function() {
  var menu_num = $(this).data('menu');  // get the href data-menu attribute to get the div id from it
  $('.display_menu').not($('#'+menu_num)).hide(0); // hide all the divs but not the open one
  $('#'+menu_num).slideToggle(100);  // toggle the div its already shown .. this slideToggle will show/hide it by clicking the <a>
  $('li').not($(this).closest('li')).removeClass('active');
  $(this).closest('li').toggleClass('active');
});

$(document).on('click',function (e)
{
// no need here for using array and .each() 
    if (!$('a[data-menu] , .display_menu').is(e.target) // if the target of the click isn't the container...
        && $('a[data-menu] , .display_menu').has(e.target).length === 0) // ... nor a descendant of the container
    {
        $('.display_menu').hide(0);
        $('li').removeClass('active');
    }
});

div.body {
  background-color: white;
  width: 100%;
  height: 400px;
  border: 1px solid grey;
}

div.display_menu {
  display: none;
}


ul {
  margin: 0 0 30px 0;
  padding: 0px;
}

li {
  display: inline-block;
}

a.display {
  display: inline-block;
  background-color: lightblue;
  padding: 10px 20px;
  text-decoration: none;
}

div.display {
  background-color: grey;
  width: 200px;
  height: 100px;
}

.active{
  background : red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="body">
  <ul>
    <li>
      <a href="#" method="POST" id='menu1' class="number" data-menu="1">Menu 1</a>
    </li>
    <li>
      <a href="#" method="POST" id='menu2' class="number" data-menu="2">Menu 2</a>
    </li>
    <li>
      <a href="#" method="POST" id='menu3' class="number" data-menu="3">Menu 3</a>
    </li>
  </ul>
  <div id="1" class="display display_menu">
    This is dropdown-menu 1!
  </div>
  <div id="2" class="display display_menu">
    This is dropdown-menu 2!
  </div>
  <div id="3" class="display display_menu">
    This is dropdown-menu 3!
  </div>

</div>
</body>

在stackoverflow

1 个答案: