javascript - href 链接未打开，单击时 Bootstrap 将开放类添加到下拉菜单而不是打开链接

Question

有什么解决办法吗？这适用于“动画”和“教育”链接。单击这些应该打开一个新页面，但 bootstrap.min 只是添加了 .open 类。

HTML

<li class="dropdown cases videos">
        <a class="dropdown-toggle" href="videos.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Animations</a>
          <ul class="dropdown-menu cases-body videos-drop">
            <p style="padding-top:15px;" class="category-cases"><a href="Vid_Waste.html">Building a Park Out of Waste</a></p>
            <p class="category-cases"><a href="Vid_ActiveLiving.html">Designing for Active Living</a></li>
            <p class="category-cases"><a href="Vid_Wildlife.html">Designing Neighborhoods for People and Wildlife</a></p>
            <p class="category-cases"><a href="Vid_UrbanAg.html">The Edible City</a></li>
            <p class="category-cases"><a href="Vid_Energy.html">Energy Efficient Home Landscapes</a></p>
            <p class="category-cases"><a href="Vid_Brownfields.html">From Industrial Wasteland to Community Park</a></p>
            <p class="category-cases"><a href="Vid_Infrastructure.html">Infrastructure for All</a></p>
            <p class="category-cases"><a href="Vid_WaterManagement.html">Leveraging the Landscape to Manage Water</a></p>
            <p class="category-cases"><a href="Vid_Parks.html">Revitalizing Communities with Parks</a></p>
            <p class="category-cases"><a href="Vid_UrbanForests.html">Urban Forests = Cleaner, Cooler Air</a></p>
          </ul>
      </li>
      <li class="dropdown cases educations">
        <a class="dropdown-toggle" href="education.html" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id="main-nav">Education</a>
          <ul style="padding-right:0;" class="dropdown-menu cases-body educations-drop">
            <p style="padding-top:15px; " class="category-cases"><a href="Ed_Brownfields.html">Brownfield Restoration / Ecosystem Rehabilitation</a></p>
            <p class="category-cases"><a href="Ed_ActiveLiving.html">Design for Active Living</a></p>
            <p class="category-cases"><a href="Ed_Wildlife.html">Designing for Biodiversity</a></p>
            <p class="category-cases"><a href="Ed_Energy.html">Energy Efficiency</a></p>
            <p class="category-cases"><a href="Ed_WaterManagement.html">Green Infrastructure</a></p>
            <p class="category-cases"><a href="Ed_Waste.html">Incorporating Sustainable Materials</a></p>
            <p class="category-cases"><a href="Ed_Infrastructure.html">Transforming Transportation Infrastructure</a></p>
            <p class="category-cases"><a href="Ed_UrbanAg.html">Urban Agriculture</a></p>
            <p class="category-cases"><a href="Ed_UrbanForests.html">Urban Forestry</a></p>
            <p class="category-cases"><a href="Ed_Parks.html">Urban Parks</a></p>
          </ul>
        </li>

我尝试了这个脚本，但没有成功。

$('.dropdown .dropdown-toggle a').on('click', function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})

有什么想法吗？

网站是 here

Answer 1

您的选择器不正确

你有:

$('.dropdown .dropdown-toggle a')

正在寻找 .dropdown-toggle 类元素内的 a 标签，但实际上是您的 a 标签拥有该类.

你想要:

$('.dropdown a.dropdown-toggle')

选择具有 .dropdown-toggle 类的 a 元素