Question

我搜索了所有与此相关的问题，我可以找到并且我似乎无法改变文本。

以下是问题的下拉列表：

Marketsource

//Dropdown toggle
$(".dropdown-menu a").click(function(){
$(this).closest('.dropdown-item').children('a').text($(this).text())
});

我包含了导航栏的部分，因为我设置它的方式目前似乎与我见过的任何示例完全匹配。

我现在拥有的Javascript（我在类似的内容上经历了很多变化）：

MainPage.Xaml

有人可以帮助我处理我的问题吗？它并不是非常重要，但它可以让这个webapp更具响应性。

谢谢！

编辑：

我意识到自从我提出这个问题以来它已经有点了，但我仍然无法让它发挥作用。我把这两个需要的文件放到Github Gist中： JS：https://gist.github.com/ChristopherBare/bd29ba9bc4ffea9953c3039acc03f81d HTML：https://gist.github.com/ChristopherBare/b2770b00881b978af3b666ba67c0e4b1

我不知道它是怎么回事。如果有人可以查看文件并告诉我哪里出错了，那将会有很大帮助。

P.S。 JS中有一些功能尚未真正做任何事情，因为它们还没有完成。所以现在就忽略它。

Answer 1

问题在于：

$(this).closest('.dropdown-item').children('a').text($(this).text());

和html就像：

<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
  <a class="dropdown-item" id="100" onclick="setStoreType(100);"  >Best Buy</a>

此处.dropdown-item位于.dropdown-menu下，您正在使用closest()选择器，该搜索器会向上搜索DOM。代替closest尝试find()并将.children('a')移除为.dropdown-item本身就是一个锚点。

Answer 2

不确定这是否是您正在寻找的，但您可以在没有额外的setStoreType函数的情况下完成它。（虽然我不确定您要对该函数做什么，所以我跳过它。）

如果您希望将id作为商店类型而不是链接中的文本，我可以稍后添加。

//Dropdown toggle
/*
$(".dropdown-menu a").click(function(){
$(this).closest('.dropdown-item').children('a').text($(this).text())
});
*/

function setStoreType(){
  
}

//Dropdown toggle
$(".dropdown-item").on("click", function(){
 $("#StoreType").text($(this).text());
});

.dropdown-item:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
  <ul class="nav navbar-nav">


    <!--First Dropdown - This needs to be fixed. Should change the text when clicked to the store that was selected.-->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown"
      aria-haspopup="true" aria-expanded="false"><span id="StoreType">Store Type</span></a>
      <div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
        <a class="dropdown-item" id="100">Best Buy</a>
        <a class="dropdown-item" id="101">Office Deopt</a>
        <a class="dropdown-item" id="102">Office Max</a>
        <a class="dropdown-item" id="103">Staples</a>
        <a class="dropdown-item" id="104">Costco</a>
      </div>
    </li>

Answer 3

我还没有找到这个问题的答案。我发布了一些github gists，以便所有代码都存在。这与jQuery无法正常工作有关，或者可能是我的下拉格式化方式？

单击项目时，导航栏下拉列表的标题不会发生变化

3 个答案: