Question

我正在使用Foundation: Dropdown buttons并希望稍微调整它的工作原理。

在下面的示例中，点击下拉列表中的链接时，是否可以在按钮中显示该链接的文字？

E.g点击“又一个”后，按钮文字将显示为“按以下顺序排列：另一个”。

<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown">Order list by: </button><br>
<ul id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true">
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
</ul>

Answer 1

你说下拉，但显示无序列表。无论哪种方式，您都可以使用jquery来完成此任务。另外，在按钮内添加一个span以将文本附加到其中。

小提琴：https://jsfiddle.net/cshanno/rvkhwpn5/1/

JS

$('li').on('click', function(){
    $('button span').text($(this).text());
});

Answer 2

要保留原始文本，您需要在按钮

中创建内联span元素

<button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown">Order list by: <span id="orderBy"></div></button><br>

$("li a").on("click", function() {
    $("button #orderBy").text($(this).text());
});

http://jsfiddle.net/jmyem32r/3/

点击下拉链接后，在按钮

2 个答案: