Question

任何想法如何解决？这适用于＆＃34;动画＆＃34;和＆＃34;教育＆＃34;链接。单击这些应该打开一个新页面，但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')

正在a类元素中查找.dropdown-toggle标记，但实际上您的a标记包含该类。

你想：

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

选择a类

的.dropdown-toggle元素

Answer 2

只需删除“data-toggle =”下拉列表“”，但正如评论中的gwar9所说，这将阻止移动版的下拉列表开启。因此，如果您希望两者兼容，则需要检测设备是否可移动，如果不是，则删除数据切换属性。

Answer 3

我已经创建了一个jsfiddle来演示如何满足您的要求。

http://jsfiddle.net/DarrenS/pcav6v1g/

正如您所解释的那样，您有一个UX要求允许以下内容;

在主菜单上悬停时，展开菜单以显示子菜单项。
单击主菜单，按照主菜单链接。

我解释说这不是默认的Bootstrap行为和悬停在触摸设备上的限制。

要实现此解决方案，我使用Modernizr来检测触摸，然后添加一些自定义jQuery以将hover（）和click（）事件附加到菜单。

我已经这样实现了，因为我仍然希望允许更大的触摸设备（例如平板电脑）访问子菜单。如果您只是在主菜单中添加了一个点击事件处理程序，他们将无法做到这一点。

//Non-Touch devices
//Hover expands menu (non default Bootstrap behaviour)
$('html.no-touch div.btn-group').hover(function(e) {
	$(this).toggleClass('open');
});

//Non-Touch devices
//Click follows main link (non default Bootstrap behaviour)
$('html.no-touch div.btn-group a.dropdown-toggle').on('click', function(e) {
	e.preventDefault();
	window.location.href = $(this).attr('href');
})

//Touch devices
//Touch (click) expands menu (default Bootstrap behaviour)

//Touch devices
//Allow touch (click) to follows main link when menu open (non default Bootstrap behaviour)
$('html.touch div.btn-group.open a.dropdown-toggle').on('click', function(e) {
	e.preventDefault();
	window.location.href = $(this).attr('href');
})

.dropdown-menu{
  margin-top: 0;
}

<div class="btn-group">
  <a href="/page.html" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Google <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="/page.html">Facebook</a></li>
    <li><a href="/page.html">Twitter</a></li>
    <li><a href="/page.html">LinkedIn</a></li>
  </ul>
</div>

Answer 4

我也遇到过这个问题，但意识到改变行为会使网站更难用于移动用户（他们没有鼠标悬停在控件上）。所以，我插入了一个＆＃34;概述＆＃34;进入链接到父页面的下拉菜单。这使得父页面可以在所有设备类型上单击。

详细信息：https://keasigmadelta.co.nz/blog/the-bootstrap-drop-down-menu-solution

href链接未打开，bootstrap在单击时将打开类添加到下拉菜单，而不是打开链接

4 个答案: