javascript - 使用 Bootstrap 如何使用关闭按钮显示输入中的 div 列表中选定的 div

Question

请检查一下the link并帮助我满足以下提到的标准:

在上面的链接上，如果我单击“文档”选项卡，那么它将从其面板中消失，并将出现在带有关闭按钮的搜索输入框中，因此，如果我再次单击“关闭”按钮，它将消失并出现在其面板中再次拥有自己的面板。

我使用过Bootstrap。

<div class="container-fluid">
<div id="gstContainer" style="margin:20px auto 20px auto;">

<div class="well well-lg" id="search-facet-container">
<div class="row">


<div class="col-sm-9 col-md-9 col-lg-9">
    <form class="form-horizontal" role="form">
    <span class="form-horizontal"><input type="text" class="form-control" id="searchinput"></span>        
    </form>
</div>


</div> 

<div id="facet" class="row" style="margin:20px auto;">
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Documents</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Collaboration</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Intranet & Web</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Contact & Knowledge</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Media</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Products</a></div>
     <div style="margin: 0px 2px 2px 0px; float: left;"><a class="btn btn-primary">Sales & Marketing</a></div>

 </div>
</div>

Answer 1

Jsfiddle

我的 fiddle 基本上是在单击其中一个按钮时将文本添加到输入框中。您还可以用它做更多事情。

以我的拙见，将按钮放在输入框中听起来不太可能(我可能是错的)，但是如果您将该输入框更改为 div，那么您的链接/按钮可以在单击时发送到那里，但是如果您想要实现类似的目标:您可以克隆按钮/链接，然后将其克隆附加到 div(如果您决定采用 div 想法)。

 $('body').on('click', '.tosearch', function(e) {


     var clone = $(this).clone();//this is how the clone should work.
     $(this).find("a").addClass("selected");

     $('#searchinput').val($('#searchinput').val() + " " +$(this).attr("value"));

 });