更改瀏覽器大小+ jQuery的Href

Question

我有一個響應式菜單，當您在PC上懸停查看時，菜單會掉落，在平板電腦上顯然您無法懸停，因此單擊我需要將菜單放下。 但是，該鏈接會將用戶定向到該點擊頁面。 我需要阻止該鏈接觸發點擊（在特定瀏覽器尺寸下），以便它可以打開下拉菜單

HTML

<ul class="mainMenu">
  <li>
     <a href="page.html">Page</a>
     <ul class="subMenu">
       <li><a href="">Sub Page 1</a></li>
       <li><a href="">Sub Page 2</a></li>
     </ul>
  </li>
  <li><a href="anotherpage.html">Another Page</a></li>
  <li><a href="anotherpage.html">Another Page</a></li>
  <li>
     <a href="page.html">Page</a>
     <ul class="subMenu">
       <li><a href="">Sub Page 1</a></li>
       <li><a href="">Sub Page 2</a></li>
     </ul>
  </li>
</ul>

該jQuery實現了必要的懸停和下拉

jQuery的

    if ($bWidth > 1025) {
        $('.mainMenu > li').unbind().hover(function () {
            $(this).find('.subMenu').stop().slideToggle(400);
        });
    } else {
        $('.mainMenu > li').unbind().click(function () {
            $(this).find('.subMenu').stop().slideToggle(400);
        });
    }

最近嘗試

if ($bWidth > 1025) {
        $('.mainMenu > li').unbind().hover(function () {
            $(this).find('.subMenu').stop().slideToggle(400);
        });
    } else {
        $('.mainMenu > li').unbind().click(function (e) {
            e.preventDefault();
            location.href = "javascript:void(0);";
            $(this).find('.subMenu').stop().slideToggle(400);
            return;
        });
    }

此嘗試是最接近的ive，但是它會阻止所有導航鏈接的執行，而ive一直試圖將其打開並關閉所有子菜單的subMenu的父A作為目標，而不僅僅是用戶單擊的子菜單。 有任何想法嗎？

Answer 1

您需要單擊一下event.preventDefault（）。 這里也有一個不錯的教程。 錨標記上的preventDefault將阻止href觸發。 另外，您使用的是哪個版本的jquery？ 我建議使用.on和.off代替bind和unbind。 另外，將事件設置為更好的選擇器。 $（“ parentSelector”）。on（“ event”，“實際選擇器”，function（）{

}）;

看這個演示