Jquery 如何使用“查看更多”按钮创建下拉列表_Jquery_Html_Css_Twitter Bootstrap

Jquery 如何使用“查看更多”按钮创建下拉列表

jquery html css twitter-bootstrap

Jquery 如何使用“查看更多”按钮创建下拉列表,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我想要一个下拉列表，显示前3项，然后看到更多链接，当我点击更多附加项。我用Twitter引导和jquery四处搜索，但找不到任何例子。请帮助，如果有任何链接的例子或现有的职位按照这个，你会找到答案。在“请参阅更多”部分中，使用 $(selector).collapse('hide'/'show'); 希望这有帮助 Thuc Tran最新更新-使用选择标记：这个和第一个完全不同。但我想这更容易。我希望这对你有帮助 <select class="form-control" id="it

我想要一个下拉列表，显示前3项，然后看到更多链接，当我点击更多附加项。我用Twitter引导和jquery四处搜索，但找不到任何例子。请帮助，如果有任何链接的例子或现有的职位

按照这个，你会找到答案。在“请参阅更多”部分中，使用

$(selector).collapse('hide'/'show');

希望这有帮助

Thuc Tran最新更新-使用选择标记：

这个和第一个完全不同。但我想这更容易。我希望这对你有帮助

<select class="form-control" id="itemList" onchange="addItems()">
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
    <option value="item3">Item 3</option>
    <option value="SeeMore" id="seeMore">See More</option>
</select>

下面这个是使用引导下拉列表

这里的旧更新是一个实时示例

在这里，您可以使用引导中的一个简单下拉列表：

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Awesome!
    <span class="caret"></span>
</button>
<ul id="yourList" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
    <li role="presentation"><a id="seeMore" role="menuitem" tabindex="-1" href="#">See more...</a></li>
</ul>
</div>

顺便说一下，这是完整的代码

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">

  <style type="text/css">

  </style>
</head>

<body>
  <br><br><br>
  <section>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                        Awesome!
                        <span class="caret"></span>
                    </button>
                    <ul id="yourList" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
                        <li role="presentation"><a id="seeMore" role="menuitem" tabindex="-1" href="#">See more...</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
  </section>


</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script type="text/javascript">

    // Add more items here.
    var addedItems = ["Billie Joe", "Mike Dirnt", "Tre Cool"];

    // When see more is clicked this methos was called.
    $('#seeMore').click(function() {

        for (var i = addedItems.length - 1; i >= 0; i--) {
            // This removes the "See more" item on the list
            $('li').find('#seeMore').remove();
            // Appending the new items on the list
            $('#yourList').append(
                $('<li>').append(
                    $('<a>').attr('href','#').append(
                        $('<span>').attr('class', 'items').append(addedItems[i])
            ))); 
        };

        // Re-open th dropdown after 5th of a second.
        setTimeout(function() { 
            $('#dropdownMenu1').trigger('click.bs.dropdown'); 
        }, 200);
    });
</script>

</html>

//在此处添加更多项目。 var addedItems=[Billie Joe，Mike Dint，Tre Cool]； //单击“查看更多”时，调用了此方法。 $“查看更多信息”。单击函数{ 对于变量i=addedItems.length-1；i>=0；i-{ //这将删除列表中的“查看更多”项目 $'li'。查找'seeMore'。删除； //将新项目追加到列表中 $'yourList'。追加 $.append $'

请自己动手写一个解决方案，然后发布你的代码，并详细说明你到底遇到了什么问题。不要期望基于一个模糊的请求为你写一个完整的解决方案。好的，谢谢。我想这应该是引导中的一种下拉列表，我找不到。你可以做的是在更改时观察选择框的值，以及它是否正确eemore value或其他东西，然后将更多选项元素附加到select元素，但您必须自己跟踪这些元素编辑：grammarThanks@Daemedeor，将尝试这种方式查看它是否看起来很好也因为UX/UI会很糟糕，否则，请确保通过stopprogration/stoppevents打开选择框（如果值为“查看更多元素。折叠不是一个好选项，因为它在选择列表中不起作用。我不认为这是我想要的。这是我想要的。但是我选择的值没有显示。哦，我的糟糕，我将编辑我的答案，请等待更新。：很好的解决方案。我实际上对它进行了分叉，并做了一些更改，我认为这些更改只使代码变了一点点。”更具可读性/可维护性，即更少的链接。你认为呢？我想补充一下，我所做的唯一更改是：使用Array.prototype.forEach，删除setTimeout中的200ms延迟，并使用函数返回字符串，而不是链接许多。append方法。很棒的一个，将使用它。谢谢。

<script type="text/javascript">

// Add more items here.
var addedItems = ["Billie Joe", "Mike Dirnt", "Tre Cool"];

// When see more is clicked this methos was called.
$('#seeMore').click(function() {

    for (var i = addedItems.length - 1; i >= 0; i--) {
        // This removes the "See more" item on the list
        $('li').find('#seeMore').remove();
        // Appending the new items on the list
        $('#yourList').append(
            $('<li>').append(
                $('<a>').attr('href','#').append(
                    $('<span>').attr('class', 'items').append(addedItems[i])
        ))); 
    };

    // Re-open th dropdown after 5th of a second.
    setTimeout(function() { 
        $('#dropdownMenu1').trigger('click.bs.dropdown'); 
    }, 200);
});

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css">

  <style type="text/css">

  </style>
</head>

<body>
  <br><br><br>
  <section>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
                        Awesome!
                        <span class="caret"></span>
                    </button>
                    <ul id="yourList" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Item 1</a></li>
                        <li role="presentation"><a id="seeMore" role="menuitem" tabindex="-1" href="#">See more...</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
  </section>


</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script type="text/javascript">

    // Add more items here.
    var addedItems = ["Billie Joe", "Mike Dirnt", "Tre Cool"];

    // When see more is clicked this methos was called.
    $('#seeMore').click(function() {

        for (var i = addedItems.length - 1; i >= 0; i--) {
            // This removes the "See more" item on the list
            $('li').find('#seeMore').remove();
            // Appending the new items on the list
            $('#yourList').append(
                $('<li>').append(
                    $('<a>').attr('href','#').append(
                        $('<span>').attr('class', 'items').append(addedItems[i])
            ))); 
        };

        // Re-open th dropdown after 5th of a second.
        setTimeout(function() { 
            $('#dropdownMenu1').trigger('click.bs.dropdown'); 
        }, 200);
    });
</script>

</html>