Question

关于通过点击页面上的任意位置关闭下拉菜单，我已经看到很多关于这个问题的问题。

我的问题虽然有点不同。我不希望通过单击其外部来关闭下拉菜单。当我点击向我显示菜单的按钮时，我希望菜单保持这样（下拉），直到用户再次点击同一个按钮。此外，在显示菜单的那一刻，我希望它将其他元素直接推到它下面。这些元素可以是例如其他按钮。你们可能在某些网站上看到了这个概念，我喜欢这个想法。我想创造同样的东西，但我不知道如何。

这可能是用Javascript制作的，因为这更容易，但我不知道该怎么做。你们有什么想法或提示吗？

我将非常感激。提前谢谢。

编辑：以下是我的内容示例：Link to jsfiddle -> https://jsfiddle.net/Cerebrl/uhykY/

我想在第一个菜单下降时按下按钮2和3，这样它就可以创建自己的空间来显示。其次，菜单应该只在我按下按钮的那一刻关闭，而不是在它外面点击。

Answer 1

如果您希望菜单推送下面的内容，请将其置于正常流程中。你需要的是一个简单的jQuery slideToggle method并默认隐藏菜单：

$('[data-toggle]').on('click', function(e){
	e.preventDefault;
    var thisLink = $(this);
    var toToggle = $( thisLink.data('toggle') );
    toToggle.slideToggle(200);
})

* {
    font-family: sans-serif;
}
.toggle-menu a {
    display: block;
    float: right;
    padding: 5px 20px;
    text-align: center;
    background: none #F1B475;
    cursor: pointer;
}
#menu-main {
    background: none #FA982E;
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
}
#menu-main a {
    display: block;
    padding: 5px 20px;
    text-decoration: none;
}
#menu-main a:hover,
#menu-main a:focus {
    background: none #D0812D;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-menu">
    <p>
        HALLO
        <a data-toggle="#menu-main" title="Click to toggle">+</a>
    </p>
    
</div>
<ul id="menu-main">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
</ul>
<p>
    Other content
</p>

由于菜单没有绝对或固定位置，因此会将菜单推送到其下方。的 JSFiddle playground

Answer 2

您可以在两行中使用toggleSlide方法，例如

＆＃13;

$(function(){
  $('button').click(function(){
    $('ul').slideToggle();
  });
});

＆＃13;

ul {
  background: none #FA982E;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}
ul a {
  display: block;
  padding: 5px 20px;
  text-decoration: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <button data-toggle="#menu-main" title="Click to toggle">Toggle Menu</button>
</p>
<ul id="menu-main">
  <li><a href="#">Menu item 1</a></li>
  <li><a href="#">Menu item 2</a></li>
</ul>

＆＃13;

点击按钮本身关闭下拉菜单

2 个答案: