小贝子编程

当链接在href - jquery中有散列时，链接只在移动设备上切换



尝试在您进入该页面之前打开带有子导航链接。现在，即使父节点有子节点，下面的代码也只能直接进入页面。想法吗?

更新解决方案(jQuery):

jQuery(window).on('resize', function () {
    jQuery('.main-navigation ul li a').toggleClass('toggleClass', jQuery(window).width() < 991);
}).trigger('resize')
jQuery('.main-navigation li a.toggleClass').click(function(e){
   var cl = jQuery(this).data('push');
   if(!cl){
     e.preventDefault();
     jQuery(this).next('ul').slideToggle();
     jQuery(this).data('push',true)
   } 
});

已更新的解决方案(CSS):

.main-navigation li ul {
  display:none;
}

HTML:

<nav class="main-navigation toggleactive" style="overflow: hidden; display: block;">
    <ul>
        <li title="Home">
            <a href="/index.php/home/">Home</a>
        </li>
        <li class="dropdown-1" title="Rentals">
            <a href="/index.php/rentals/">Rentals</a>
            <ul class="level2">
                <li title="Chico">
                    <a href="/index.php/rentals/chico/">Chico</a>
                    <ul class="level3">
                        <li title="Campbell Commons">
                            <a href="/index.php/rentals/chico/campbell-commons/">Campbell Commons</a>
                        </li>
                        <li title="East of Eaton">
                            <a href="/index.php/rentals/chico/east-of-eaton/">East of Eaton</a>
                        </li>
                        <li title="La Vista Verde">
                            <a href="/index.php/rentals/chico/la-vista-verde/">La Vista Verde</a>
                        </li>
                        <li title="Longfellow Apartments">
                            <a href="/index.php/rentals/chico/longfellow-apartments/">Longfellow Apartments</a>
                        </li>
                        <li title="Lucian Manor Senior Apartments">
                            <a href="/index.php/rentals/chico/lucian-manor-senior-apartments/">Lucian Manor Senior Apartments</a>
                        </li>
                        <li title="Murphy Commons">
                            <a href="/index.php/rentals/chico/murphy-commons/">Murphy Commons</a>
                        </li>
                        <li title="North Point Apartments">
                            <a href="/index.php/rentals/chico/north-point-apartments/">North Point Apartments</a>
                        </li>
                    </ul>
                </li>
                <li title="Gridley">
                    <a href="/index.php/rentals/gridley/">Gridley</a>
                    <ul class="level3">
                        <li title="Hazel Hotel">
                            <a href="/index.php/rentals/gridley/hazel-hotel/">Hazel Hotel</a>
                        </li>
                    </ul>
                </li>
                <li title="Hamilton City">
                    <a href="/index.php/rentals/hamilton-city/">Hamilton City</a>
                    <ul class="level3">
                        <li title="Las Palmas Apartments">
                            <a href="/index.php/rentals/hamilton-city/las-palmas-apartments/">Las Palmas Apartments</a>
                        </li>
                        <li title="Shotover Inn Apartments">
                            <a href="/index.php/rentals/hamilton-city/shotover-inn-apartments/">Shotover Inn Apartments</a>
                        </li>
                    </ul>
                </li>
                <li title="Live Oak">
                    <a href="/index.php/rentals/live-oak/">Live Oak</a>
                    <ul class="level3">
                        <li title="Maple Park Apartments, Phase 1">
                            <a href="/index.php/rentals/live-oak/maple-park-apartments/">Maple Park Apartments, Phase 1</a>
                        </li>
                        <li title="Maple Park Senior Apartments">
                            <a href="/index.php/rentals/live-oak/maple-park-apartments-phase-2/">Maple Park Senior Apartments</a>
                        </li>
                    </ul>
                </li>
                <li title="Marysville">
                    <a href="/index.php/rentals/marysville/">Marysville</a>
                    <ul class="level3">
                        <li title="Marymead Park">
                            <a href="/index.php/rentals/marysville/marymead-park/">Marymead Park</a>
                        </li>
                    </ul>
                </li>
                <li title="Orland">
                    <a href="/index.php/rentals/orland/">Orland</a>
                    <ul class="level3">
                        <li title="Rancho de Soto Apartments">
                            <a href="/index.php/rentals/orland/rancho-de-soto-apartments/">Rancho de Soto Apartments</a>
                        </li>
                    </ul>
                </li>
                <li title="Paradise">
                    <a href="/index.php/rentals/paradise/">Paradise</a>
                    <ul class="level3">
                        <li title="Paradise Community Village">
                            <a href="/index.php/rentals/paradise/paradise-community-village/">Paradise Community Village</a>
                        </li>
                    </ul>
                </li>
                <li title="Red Bluff">
                    <a href="/index.php/rentals/red-bluff/">Red Bluff</a>
                    <ul class="level3">
                        <li title="Brickyard Creek Apartments">
                            <a href="/index.php/rentals/red-bluff/brickyard-creek-apartments/">Brickyard Creek Apartments</a>
                        </li>
                    </ul>
                </li>
                <li title="Redding">
                    <a href="/index.php/rentals/redding/">Redding</a>
                    <ul class="level3">
                        <li title="Linden Apartments">
                            <a href="/index.php/rentals/redding/linden-apartments/">Linden Apartments</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li title="News">
            <a href="/index.php/news/">News</a>
        </li>
        <li class="dropdown-1" title="Home Ownership">
            <a href="/index.php/home-ownership/">Home Ownership</a>
            <ul class="level2">
                <li title="Active Developments">
                    <a href="/index.php/home-ownership/active-developments/">Active Developments</a>
                    <ul class="level3">
                        <li title="Biggs Estates">
                            <a href="/index.php/home-ownership/active-developments/biggs-estates/">Biggs Estates</a>
                        </li>
                        <li title="Calle Vista">
                            <a href="/index.php/home-ownership/active-developments/calle-vista/">Calle Vista</a>
                        </li>
                        <li title="Villa La Michele III">
                            <a href="/index.php/home-ownership/active-developments/villa-la-michele-iii/">Villa La Michele III</a>
                        </li>
                        <li title="Sierra Vista">
                            <a href="/index.php/home-ownership/active-developments/sierra-vista/">Sierra Vista</a>
                        </li>
                        <li title="Sierra Vista 2">
                            <a href="/index.php/home-ownership/active-developments/sierra-vista-2/">Sierra Vista 2</a>
                        </li>
                        <li title="Siskiyou Grove">
                            <a href="/index.php/home-ownership/active-developments/siskiyou-grove/">Siskiyou Grove</a>
                        </li>
                    </ul>
                </li>
                <li title="Past Developments">
                    <a href="/index.php/home-ownership/past-developments/">Past Developments</a>
                </li>
                <li title="How to Bid on CHIP Projects">
                    <a href="/index.php/home-ownership/how-to-bid-on-chip-projects/">How to Bid on CHIP Projects</a>
                </li>
                <li title="Homebuyer Education">
                    <a href="/index.php/home-ownership/homebuyer-education/">Homebuyer Education</a>
                </li>
            </ul>
        </li>
        <li title="Jobs">
            <a href="/index.php/jobs/">Jobs</a>
        </li>
        <li title="About Us">
            <a href="/index.php/about-us/">About Us</a>
            <ul class="level2">
                <li title="Leadership">
                    <a href="/index.php/about-us/leadership/">Leadership</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

如果您不想使用preventDefault失去gotolink行为，一种方法是控制按钮，如:

  • 第一次点击切换子菜单
  • 第二次点击进入链接

$('.main-navigation li a').click(function(e){
   var cl = $(this).data('push');
   if(!cl){
     e.preventDefault();
     $(this).next('ul').slideToggle();
     $(this).data('push',true)
   } 
});
li ul {
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="main-navigation">
  <ul>
    <li class="dropdown-1" title="Rentals">
      <a href="http://...">Rentals</a>
      <ul class="level2">
        <li title="Chico">
          <a href="http://...">Chico</a>
          <ul class="level3">
            <li title="Campbell Commons">
              <a href="http://...">Campbell Commons</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

您需要阻止点击<a>的默认行为。像这样。

$('.main-navigation li a').click(function(e){
    e.preventDefault(); //e is click event
    $(this).next('ul').slideToggle();
    return false; //just in case
});

您需要隐藏这些li级别。我看到了1级和2级，所以我们得先把它们藏起来。在jQuery中，你只是忘记添加e.p preventdefault()函数来阻止元素的默认动作发生。这就是2的错误。现在可以使用代码来。用你的jQueryLiveFiddle。这里我只用toggle。

$(document).ready(function() {
  $('ul li a').click(function(e) {
    $(this).next('ul').toggle('blind');;
    e.preventDefault();
  })
});
.level2,
.level3 {
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <nav class="main-navigation toggleactive" style="overflow: hidden; display: block;">
  <ul>
    <li title="Home">
      <a href="/index.php/home/">Home</a>
    </li>
    <li class="dropdown-1" title="Rentals">
      <a href="/index.php/rentals/">Rentals</a>
      <ul class="level2">
        <li title="Chico">
          <a href="/index.php/rentals/chico/">Chico</a>
          <ul class="level3">
            <li title="Campbell Commons">
              <a href="/index.php/rentals/chico/campbell-commons/">Campbell Commons</a>
            </li>
            <li title="East of Eaton">
              <a href="/index.php/rentals/chico/east-of-eaton/">East of Eaton</a>
            </li>
            <li title="La Vista Verde">
              <a href="/index.php/rentals/chico/la-vista-verde/">La Vista Verde</a>
            </li>
            <li title="Longfellow Apartments">
              <a href="/index.php/rentals/chico/longfellow-apartments/">Longfellow Apartments</a>
            </li>
            <li title="Lucian Manor Senior Apartments">
              <a href="/index.php/rentals/chico/lucian-manor-senior-apartments/">Lucian Manor Senior Apartments</a>
            </li>
            <li title="Murphy Commons">
              <a href="/index.php/rentals/chico/murphy-commons/">Murphy Commons</a>
            </li>
            <li title="North Point Apartments">
              <a href="/index.php/rentals/chico/north-point-apartments/">North Point Apartments</a>
            </li>
          </ul>
        </li>
        <li title="Gridley">
          <a href="/index.php/rentals/gridley/">Gridley</a>
          <ul class="level3">
            <li title="Hazel Hotel">
              <a href="/index.php/rentals/gridley/hazel-hotel/">Hazel Hotel</a>
            </li>
          </ul>
        </li>
        <li title="Hamilton City">
          <a href="/index.php/rentals/hamilton-city/">Hamilton City</a>
          <ul class="level3">
            <li title="Las Palmas Apartments">
              <a href="/index.php/rentals/hamilton-city/las-palmas-apartments/">Las Palmas Apartments</a>
            </li>
            <li title="Shotover Inn Apartments">
              <a href="/index.php/rentals/hamilton-city/shotover-inn-apartments/">Shotover Inn Apartments</a>
            </li>
          </ul>
        </li>
        <li title="Live Oak">
          <a href="/index.php/rentals/live-oak/">Live Oak</a>
          <ul class="level3">
            <li title="Maple Park Apartments, Phase 1">
              <a href="/index.php/rentals/live-oak/maple-park-apartments/">Maple Park Apartments, Phase 1</a>
            </li>
            <li title="Maple Park Senior Apartments">
              <a href="/index.php/rentals/live-oak/maple-park-apartments-phase-2/">Maple Park Senior Apartments</a>
            </li>
          </ul>
        </li>
        <li title="Marysville">
          <a href="/index.php/rentals/marysville/">Marysville</a>
          <ul class="level3">
            <li title="Marymead Park">
              <a href="/index.php/rentals/marysville/marymead-park/">Marymead Park</a>
            </li>
          </ul>
        </li>
        <li title="Orland">
          <a href="/index.php/rentals/orland/">Orland</a>
          <ul class="level3">
            <li title="Rancho de Soto Apartments">
              <a href="/index.php/rentals/orland/rancho-de-soto-apartments/">Rancho de Soto Apartments</a>
            </li>
          </ul>
        </li>
        <li title="Paradise">
          <a href="/index.php/rentals/paradise/">Paradise</a>
          <ul class="level3">
            <li title="Paradise Community Village">
              <a href="/index.php/rentals/paradise/paradise-community-village/">Paradise Community Village</a>
            </li>
          </ul>
        </li>
        <li title="Red Bluff">
          <a href="/index.php/rentals/red-bluff/">Red Bluff</a>
          <ul class="level3">
            <li title="Brickyard Creek Apartments">
              <a href="/index.php/rentals/red-bluff/brickyard-creek-apartments/">Brickyard Creek Apartments</a>
            </li>
          </ul>
        </li>
        <li title="Redding">
          <a href="/index.php/rentals/redding/">Redding</a>
          <ul class="level3">
            <li title="Linden Apartments">
              <a href="/index.php/rentals/redding/linden-apartments/">Linden Apartments</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li title="News">
      <a href="/index.php/news/">News</a>
    </li>
    <li class="dropdown-1" title="Home Ownership">
      <a href="/index.php/home-ownership/">Home Ownership</a>
      <ul class="level2">
        <li title="Active Developments">
          <a href="/index.php/home-ownership/active-developments/">Active Developments</a>
          <ul class="level3">
            <li title="Biggs Estates">
              <a href="/index.php/home-ownership/active-developments/biggs-estates/">Biggs Estates</a>
            </li>
            <li title="Calle Vista">
              <a href="/index.php/home-ownership/active-developments/calle-vista/">Calle Vista</a>
            </li>
            <li title="Villa La Michele III">
              <a href="/index.php/home-ownership/active-developments/villa-la-michele-iii/">Villa La Michele III</a>
            </li>
            <li title="Sierra Vista">
              <a href="/index.php/home-ownership/active-developments/sierra-vista/">Sierra Vista</a>
            </li>
            <li title="Sierra Vista 2">
              <a href="/index.php/home-ownership/active-developments/sierra-vista-2/">Sierra Vista 2</a>
            </li>
            <li title="Siskiyou Grove">
              <a href="/index.php/home-ownership/active-developments/siskiyou-grove/">Siskiyou Grove</a>
            </li>
          </ul>
        </li>
        <li title="Past Developments">
          <a href="/index.php/home-ownership/past-developments/">Past Developments</a>
        </li>
        <li title="How to Bid on CHIP Projects">
          <a href="/index.php/home-ownership/how-to-bid-on-chip-projects/">How to Bid on CHIP Projects</a>
        </li>
        <li title="Homebuyer Education">
          <a href="/index.php/home-ownership/homebuyer-education/">Homebuyer Education</a>
        </li>
      </ul>
    </li>
    <li title="Jobs">
      <a href="/index.php/jobs/">Jobs</a>
    </li>
    <li title="About Us">
      <a href="/index.php/about-us/">About Us</a>
      <ul class="level2">
        <li title="Leadership">
          <a href="/index.php/about-us/leadership/">Leadership</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium