2016-08-24 101 views
0

我上個月幫助/使用過一個網站項目hte,但現在卡住了,因爲菜單的.toggle函數無法按預期工作。切換突然不起作用,JQuery

我做了完整的菜單here

jQuery(document).ready(function() { 
jQuery('.menuD').click(function(e) { 
    jQuery(this).toggleClass('active'); 
    jQuery('.mennu').toggleClass('active'); 

    e.preventDefault(); 
    }); 
}); 

的小提琴(這是我第一次用小提琴,所以我希望我已經照耀處一切正確的方式,我瞭解它,因爲我沒有以包括「頭」區域)。

我真的不明白爲什麼它不工作,因爲我去年爲我自己的頁面做了類似的解決方案,可以完美地工作和驗證。 Javascript並不是我最強大的語言,所以一些幫助找到問題將被appriciated。

+0

檢查此[DEMO](https://jsfiddle.net/sb2jaok9/5 /) – guradio

+0

哦,那太棒了,非常感謝你,必須對它們進行比較以查看我缺少的位置。 –

+0

檢查這部分'jQuery(this).parent()。next()。toggleClass('active');'你想要切換的菜單不是你點擊的元素,你需要正確引用它 – guradio

回答

0

你有一個錯字:

jQuery('.mennu').toggleClass('active'); 

必須

jQuery('.menu').toggleClass('active'); 
0

var timeoutMenu = null; 
 
$('.trigger').on("click", function() { 
 
    $('.dropdown').toggleClass('active'); 
 
}); 
 

 
$('.trigger').hover(function() { 
 
    clearTimeout(timeoutMenu); 
 
    $('.dropdown').toggleClass('active'); 
 
}, function() { 
 
    setTimeout(function() { 
 
     $('.dropdown').removeClass('active'); 
 
    }, 500); 
 
});
.menu, .menu ul { 
 
     list-style:none; 
 
     cursor:pointer; 
 
     margin:0; 
 
     padding:0; 
 
    } 
 
    .menu a { 
 
     float:left; 
 
     text-decoration:none; 
 
     color:#000; 
 
    } 
 
    .menu li:hover > a { 
 
     color:#666; 
 
    } 
 
    .menu ul { 
 
     opacity:0; 
 
     visibility:hidden; 
 
     position:absolute; 
 
     top:25px; 
 
     z-index:1; 
 
     background:#666; 
 
    } 
 
    .menu li:hover > ul { 
 
     opacity:1; 
 
     visibility:visible; 
 
    } 
 
    .menu ul a { 
 
     padding:5px; 
 
     display:block; 
 
     text-transform:none; 
 
    } 
 
    .menu ul a:hover { 
 
     background-color:lightgray; 
 
    } 
 
.trigger:hover .dropdown, 
 
.trigger.clicked .dropdown { 
 
    display: block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li> <a class="trigger">MENU</a> 
 

 
     <ul class="dropdown"> 
 
      <li><a href="#">Item 1</a></li> 
 
      <li><a href="#">Item 2</a></li> 
 
      <li><a href="#">Item 3</a></li> 
 
      <li><a href="#">Item 4</a></li> 
 
      <li><a href="#">Item 5</a></li> 
 
     </ul> 
 
    </li> 
 
</ul>