Question

1）如何从子菜单中获取文本？ - 我无法获得文本/值 2）如何用单击的子菜单文本替换文本“菜单”？ - 当我用文本设置a时，插入符号令人惊讶地消失了

<a id="testa" class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 
    <span class="caret"></span>
</a>
<ul id="testul" class="dropdown-menu">
    <li><a href="#">Submenu 1-1</a></li>
    <li><a href="#">Submenu 1-2</a></li>
    <li><a href="#">Submenu 1-3</a></li>                        
</ul>

我有这个jQuery来监听点击：

$("#testul").on("click", "li a", function (event) {
    console.log(event);
    var clickedSubMenu = ???;
    $('#testa').text(clickedSubMenu); // <-- removes the caret icon
});

注意：我可以使用select和option，但因为我需要使用bootstrap的样式元素，所以我坚持使用

<select id="combo">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
</select>
<input id="button1" type="button" value="Click!" />

$('#button1').click(function(){ 
    alert($('#combo').val());
});

Answer 1

虽然很简单，

http://jsfiddle.net/muqjtdg6/

$("#testul").on("click", "li a", function (event) {
    console.log(event);
    event.preventDefault();
    var clickedSubMenu = $(this);
    $('#testa').text(clickedSubMenu.text()); // <-- removes the caret icon
});

请注意，我使用了event.preventDefault()，您不需要它，但是如果您为锚点输入了网址，则需要提供该声明

修改

如果您想保留插入符，请设置html()而不是http://jsfiddle.net/muqjtdg6/1/

$("#testul").on("click", "li a", function (event) { console.log(event); var clickedSubMenu = $(this); $('#testa').html(clickedSubMenu.text()+'<span class="caret"></span>'); // <-- removes the caret icon });

Answer 2

将链接文本和符号放在不同的跨度中会更好。这样，如果您想为链接文本和链接符号提供单独的样式，则可以轻松进行样式设置。这样，您只能通过javascript操作链接的text。

所以html可以是

<a id="testa" class="dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="link-text">Menu</span> 
    <span class="caret">&</span>
</a>

和javascript

$("#testul").on("click", "li a", function (event) {
    event.preventDefault();
    $('#testa').find('.link-text').text($(this).text());
});

获取选定的li文本并使用它设置菜单的文本

2 个答案: