Question

我进行了搜索，但无法找到解决方案。我需要一个总是打开的下拉菜单，即使通过导航到其他菜单项和下拉菜单项。并且只能关闭.close按钮。在mouseenter上：

$('.main-nav ul > li').mouseenter(function(e){
    $(this).addClass('active').find('.dropdown-menu').show();
 }).mouseleave(function(e){
    $(this).removeClass('active').find('.dropdown-menu').hide();

});

按钮点击片

：

$('.dropdown-menu .close').click( function(e){
    e.stopPropagation();
    $('.dropdown-menu').hide();
    $('.dropdown .dropdown-toggle').parent().removeClass('active');
    console.log('close btn!');
});

如果在菜单外单击，我也可以查看：

var container = $('.dropdown');

//check if the clicked area is dropdown or not
if (container.has(e.target).length === 0) {
    $('.dropdown-menu').hide();
    console.log('clicked out!');
}

但是如何保持下拉列表始终显示为Bootstrap？并且只关闭按钮＆＃39; .close＆＃39;或重新加载？我可以在点击时实现它，它可以根据需要工作，但请求是在悬停时执行。在MegaNav上悬停显示下拉项目，可以在悬停在所有菜单项上时更改并仅在按钮上关闭，而不是在mouseleave上关闭。同时可以浏览顶部菜单项和所有潜在下拉项。

小提琴： https://jsfiddle.net/b9Lgvuom/

Answer 1

我更新了fiddle，其中包含一个简单的示例，说明它是如何工作的。

我使用唯一ID和一些描述性文字更新了关闭按钮。然后我添加了以下代码，以便在单击按钮时关闭下拉菜单。

public class Post extends Fragment implements OnDownloadImageListener {
...
private void saveBitmap(String userName, String key){
    DownloadImage downloadImage = new DownloadImage();
    final Bitmap[] bitmap = new Bitmap[1];
    final String url = "https://graph.facebook.com/" + key + "/picture?  type=large";

    downloadImage.execute(url);
    downloadImage.setOnDownloadImageListener(this);
    //**FIGURE 1**
}

@Override
public void onDownloadComplete(Bitmap bmap) { 
    bitmap[0] = bmap; //fixed the variable error
}

然后我注释掉关闭菜单的代码行＆＃34; mouseleave＆＃34;这样当用户将光标移开时它就不会关闭。根据菜单结构的复杂性（即：子菜单），您的解决方案可能需要一些额外的逻辑，以便用户可以浏览。

有很多方法可以做你想要的。选择对你来说最有意义的选项。

Answer 2

感谢jQuery论坛和JΛ̊KE:-) 这是解决方案：

$(document).ready(function () {
$('.main-nav ul > li').mouseenter(function(e){
		$('.active').removeClass('active').find('.dropdown-menu').hide();
        $(this).addClass('active').find('.dropdown-menu').show();
     }); 
 $('.dropdown-menu .close').click( function(e){
        e.stopPropagation();
        $(this).closest('.dropdown-menu').hide().parent().removeClass('active');
        console.log('close btn!');
    });
    
});

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.dropdown {
    position: relative;
    display: block;
    float: left;
    padding-right: 10px;
    margin-right: 15px;
}
.dropdown.active > a {
  color: green;
}
.dropdown-menu {
    width: 100%;
    top: 33px;
    min-width: 300px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .15);
    background: #f7f7f7;
    height: auto;
    position: absolute;
    top: 100%;
    left: 0px;
    display: none;
    float: left;
}

.dropdown-menu .dropdown-wrapper {
    position: relative;
}
.dropdown-menu .dropdown-wrapper .close {
    position: absolute;
    height: 25px;
    width: 25px;
    border: 0;
    top: 5px;
    outline: none;
    right: 10px;
    z-index: 2;
    cursor: pointer;
    background: none;
}
.dropdown-menu .dropdown-wrapper .close:before, .dropdown-menu .dropdown-wrapper .close:after {
    content: "";
    opacity: 1;
    border-bottom: 1px solid #000;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
}
.dropdown-menu .dropdown-wrapper .close:before {
    transform: rotate(45deg);
}
.dropdown-menu .dropdown-wrapper .close:after {
    transform: rotate(-45deg);
}
.category-menu a {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
  <ul>
    <li class="dropdown">
      <a href="#" class="toggle">Category 1</a>
      <div class="dropdown-menu">
        <div class="dropdown-wrapper">
          <!--- close button  --->
          <button class="close"></button>
          <div class="category-menu">
            <a href="#">Subcategory 1</a>
            <a href="#">Subcategory 2</a>
            <a href="#">Subcategory 3</a>
          </div>
        </div>
      </div>
    </li>
    <li class="dropdown">
      <a href="#" class="toggle">Category 2</a>
      <div class="dropdown-menu">
        <div class="dropdown-wrapper">
          <!--- close button  --->
          <button class="close"></button>
          <div class="category-menu">
            <a href="#">Subcategory 1</a>
            <a href="#">Subcategory 2</a>
            <a href="#">Subcategory 3</a>
          </div>
        </div>
      </div>
    </li>
    <li class="dropdown">
      <a href="#" class="toggle">Category 3</a>
      <div class="dropdown-menu">
        <div class="dropdown-wrapper">
          <!--- close button  --->
          <button class="close"></button>
          <div class="category-menu">
            <a href="#">Subcategory 1</a>
            <a href="#">Subcategory 2</a>
            <a href="#">Subcategory 3</a>
          </div>
        </div>
      </div>
    </li>
    <li class="dropdown">
      <a href="#" class="toggle">Category 4</a>
      <div class="dropdown-menu">
        <div class="dropdown-wrapper">
          <!--- close button  --->
          <button class="close"></button>
          <div class="category-menu">
            <a href="#">Subcategory 1</a>
            <a href="#">Subcategory 2</a>
            <a href="#">Subcategory 3</a>
          </div>
        </div>
      </div>
    </li>
  </ul>
  
</div>

如何显示菜单下拉菜单，浏览菜单项和下拉项并关闭“关闭”。按键

2 个答案: