クリックイベントを認識するオプションを2回クリックします

Question

私はカスタムドロップダウンを行いました。これは、オプションが最初にクリックされたとき、または現在のアクティブなオプションを閉じた後にオプションがクリックされたときを除いて、完全に機能します。オプションがクリックされたことを認識するのに2回のクリックが必要です。誰もこれで助けることができますか？ここ

$(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が見えるが、（人間のためにそう見えない）空であることをasumeましょう

を説明しています。

spanを押すとslideToggleを使用してdivを非表示にし、データを追加します。

だから、あなたのdivは隠されています（最初のクリック）。

もう一度クリックすると、divが表示されます（2回目のクリック）。

あなたができることはをトグルするdivにstyle="display:none"を追加しています。

または、div.mega-menuにダミーテキストを追加することでこの問題をテストできます。

可能な修正

ダミーテキストと

例：表示変更とhttps://jsfiddle.net/m9s7vxjL/が

例：https://jsfiddle.net/bwt05783/