点击两个选项即可识别点击事件

Question

我已经制作了自定义下拉列表。除了第一次单击选项或者在关闭当前活动选项后单击选项时，它才能正常工作。只需单击两次即可识别该选项已被单​​击。任何人都可以帮忙吗？

＆＃13;

＆＃13;

$(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;
    }
});
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是我的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时，使用div隐藏slideToggle并添加数据。

所以现在隐藏了div（第一次点击）。

再次点击时，会出现div（第二次点击）。

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

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

可能的修复

虚拟文本示例：https://jsfiddle.net/m9s7vxjL/

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