jquery - 在一个选项上点击 2 次以识别点击事件

Question

我做了一个自定义下拉菜单。除了第一次单击该选项或在关闭当前事件选项后单击某个选项外，它工作得很好。需要单击两次才能识别该选项已被单​​击。有人可以帮忙吗？

$(function() {

var currentTab = "";
var lorem1con = "<div id='div1'><ul class='ul-reset'><h6>Heading 1</h6><li><a href='#'>sublink1.1</a></li></ul></div>";
var lorem2con = "<div id='div1'><ul class='ul-reset'><h6>Heading 2</h6><li><a href='#'>sublink2.1</a></li></ul></div>";

$('.navbar-nav>li>span').on("click", function() {

    if (currentTab == "" || currentTab == $(this).html()) {
        $(this).parent().siblings('.mega-menu').css("opacity", "1").stop(true, false, true).slideToggle(300);
    }

    currentTab = $(this).html();
    switch (currentTab) {
        case "Lorem1":
            $('#main-div').empty();
            $('#main-div').append(lorem1con);
            break;
        case "Lorem2":
            $('#main-div').empty();
            $('#main-div').append(lorem2con);
            break;
        default:
            break;
    }
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <ul style="list-style: none; padding:0;" class="nav-dropdown navbar-nav">
  <li class='droppable'>
      <span>Lorem1</span>
  </li>
  <li class='droppable'>
      <span>Lorem2</span>
  </li>
  <li class='droppable'>
      <span>Lorem3</span>
  </li>
  <div class='mega-menu'>
      <div class='container cf' id="main-div"></div>
  </div>
</ul>

这是我的CSS

div.mega-menu {
background: #f0f0f0;
display: none;
left: 0;
position: absolute;
top: 100%;
text-align: left;
width: 100%;
max-height: 350px;
}

.mega-menu h3 {
color: #444;
}

.mega-menu ul {
float: left;
margin-right: 30px;
margin-left: 30px;
width: 20%;
padding-left: 0;
list-style: none;
}

.mega-menu ul:last-child {
margin-right: 0;
}

.mega-menu ul li {
font-size: 15px;
line-height: 1;
}

.mega-menu a {
color: #4ea3d8;
display: block;
padding: 5px 0;
}

.mega-menu a:hover {
color: #2d6a91;
}

.container.cf {
padding: 25px 15px;
max-width: 100%;
width: 100%;
height: 100%;
/* display: none; */
}

.container.cf>div {
width: 85%;
margin: 0 auto;
height: 100%;
}

.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}

.cf:after {
clear: both;
}

Answer 1

问题解释

让我们假设 div#main-div 是可见的，但是是空的(因此对于人类来说是不可见的)。

当您按下 span 时，您会使用 slideToggle 隐藏 div 并添加数据。

现在您的 div 已隐藏(第一次点击)。

当您再次点击时，div 出现(第二次点击)。

您可以做的是将 style="display:none" 添加到您切换的 div (div.mega-menu) .

或者，您可以通过在 div.mega-menu 中添加一些虚拟文本来测试这个问题。

可能的修复

带有虚拟文本的示例:https://jsfiddle.net/m9s7vxjL/

显示更改示例:https://jsfiddle.net/bwt05783/