mit 2 Klicks auf eine Option zum Erkennen eines Klickereignisses

Question

Ich habe ein benutzerdefiniertes Dropdown-Menü erstellt. Es funktioniert perfekt, außer wenn die Option zum ersten Mal angeklickt wird oder wenn eine Option nach dem Schließen der aktuellen aktiven Option angeklickt wird. Es dauert zwei Klicks, um zu erkennen, dass die Option angeklickt wurde. Kann mir jemand helfen?

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

hier ist mein 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

Problem erklärt

wir asume, dass die div#main-div sichtbar ist, aber leer (so unsichtbar für den Menschen). Wenn Sie die span drücken, verstecken Sie die div mit slideToggle und fügen Sie die Daten hinzu

So jetzt Ihre div ist ausgeblendet (erster Klick). Wenn Sie erneut klicken, wird die div angezeigt (zweiter Klick).

Was Sie tun können, ist style="display:none" zu der div hinzufügen Sie wechseln (div.mega-menu).

Oder Sie könnten dieses Problem testen, indem Sie Dummy-Text in div.mega-menu hinzufügen.

Mögliche Korrekturen

Beispiel mit Dummy-Text: https://jsfiddle.net/m9s7vxjL/

Beispiel mit Anzeigenwechsel: https://jsfiddle.net/bwt05783/