onClick問題與容器導航下拉（需要雙擊下拉）

我在我的JS文件中的onClick函數有問題當一個標籤打開，並嘗試點擊第二個鏈接，新標籤贏得' t打開，除非鏈接被點擊兩次。這裏是html代碼：onClick問題與容器導航下拉（需要雙擊下拉）

<body> <nav> <div id="navContainer"> <ul> <li> <a href='' class='tabButton' data-openTab='1'>1</a></li> <li> <a href='' class='tabButton' data-openTab='2'>2</a></li> <li> <a href='' class='tabButton' data-openTab='3'>3</a></li> <li> <a href='' class='tabButton' data-openTab='4'>4</a></li> <li> <a href='' class='tabButton' data-openTab='5'>5</a></li> </ul> </div> <div id = "tabCont" class="tabContainer"> <div id="1"> </div> </div> <div id="2" > <a href="" class="closeButton"> CLOSE </a> </div> <div id="3" > <a href="" class="closeButton"> CLOSE </a> </div> <div id="4" > <a href="" class="closeButton"> CLOSE </a> </div> <div id="5" > <a href="" class="closeButton"> CLOSE </a> </div> </nav> </body>

這裏是JS

$(document).ready(function() { 
document.menuIsOpen = false; 

$('.tabContainer > div').hide(); 
$('.tabContainer > div:first-of-type').hide(); 

$('.tabButton').click(function(event) { 
    if (document.menuIsOpen == false) { 
     document.menuIsOpen = true; 
     event.preventDefault(); 

     $('.tabContainer > div').hide(); 
     $("#" + $(this).attr('data-openTab')).toggle("slow").css("display", "block"); 

     $('.tabButton').click(function(event) { 

      $('.tabContainer > div').hide(); 
      $("#" + $(this).attr('data-openTab')).show().css("display", "block"); 
     }); 
    } else { 
     document.menuIsOpen = false; 
     event.preventDefault(); 
     $('.tabContainer > div').hide("slow"); 
     $('.tabContainer > div:first-of-type').hide("slow"); 

    } 

    $('.closeButton').click(function(event) { 
     event.preventDefault(); 

     $('.tabContainer > div').hide("slow"); 
     $('.tabContainer > div:first-of-type').hide("slow"); 
    }); 
}); 

$('.tabContainer > div').hide(); 
$('.tabContainer > div:first-of-type').hide(); 
});

我敢肯定，我真的有凌亂的代碼，但它的作品，因爲它應該遠離的onClick問題。先進的謝謝！

來源

2014-12-05 Toy

是的是完整的代碼？這似乎奇怪的格式！你爲什麼要在onclick內創建另一個onclick？這可能是問題所在。 – 2014-12-05 13:31:00

我補充說，當另一個鏈接被點擊時，它會馬上下載其他內容，而不是關閉第一個內容。 – Toy 2014-12-05 13:46:33

HTML：

<nav> 
    <div id="navContainer"> 
     <ul> 
      <li> 
      <a href='' class='tabButton' data-openTab='1'>1</a> 
      </li> 
      <li> 
      <a href='' class='tabButton' data-openTab='2'>2</a> 
      </li> 
      <li> 
      <a href='' class='tabButton' data-openTab='3'>3</a> 
      </li> 
      <li> 
      <a href='' class='tabButton' data-openTab='4'>4</a> 
      </li> 
      <li> 
      <a href='' class='tabButton' data-openTab='5'>5</a> 
      </li> 
     </ul> 
    </div> 
    <div id = "tabCont" class="tabContainer"> 
     <div id="1">1 
      <a href="" class="closeButton"> CLOSE </a> 
     </div> 
     <div id="2">2 
      <a href="" class="closeButton"> CLOSE </a> 
     </div> 
     <div id="3">3 
      <a href="" class="closeButton"> CLOSE </a> 
     </div> 
     <div id="4">4 
      <a href="" class="closeButton"> CLOSE </a> 
     </div> 
     <div id="5">5 
      <a href="" class="closeButton"> CLOSE </a> 
     </div> 
    </div> 
</nav>

JS：

document.menuIsOpen = false; 
    $('.tabContainer > div').hide(); 
    $('.tabButton').click(function(event) { 
     var 
      open = $("#" + $(this).attr('data-openTab')), 
      isOpened = open.is('.opened'); 

     event.preventDefault(); 
     if (document.menuIsOpen) { 
      document.menuIsOpen = false; 
      $('.opened').hide("slow").removeClass('opened'); 
     } 
     if (!isOpened) { 
      document.menuIsOpen = true; 
      open.addClass('opened').show("slow").css("display", "block"); 
     } 
    }); 
    $('.closeButton').click(function(event) { 
     event.preventDefault(); 
     $('.opened').hide("slow").removeClass('opened'); 
    });

DEMO：http://jsfiddle.net/nothrem/mcgv4gok/

來源

2014-12-05 13:55:03

非常感謝!!!!! – Toy 2014-12-05 13:58:44

只是爲了清楚這是手風琴菜單：http://jqueryui.com/accordion/ – 2014-12-05 14:07:05

onClick問題與容器導航下拉（需要雙擊下拉）

回答

相關問題