onChange 按钮标签不保留其样式

Question

我有一个有趣的问题。我有一个用于选择的按钮(例如选择项目(。该代码在这里：

<button class="btn btn-primary dropdown-toggle" style="width: 166%;" 
        type="button" id="dropdownMenuButton" data-toggle="dropdown" 
        aria-haspopup="true" aria-expanded="false">
   <span id="dropdown_button" style="width: 166%;">
     <img src="wp-content/themes/directory2/images/closest.png" />
          10 Closest Amenities</span>
   <span class="caret" style="margin-top: 9px;float: right;"></span>
</button>

然后，它使用一些jQuery更改按钮/选择中的文本：

$(document).on('click', '.dropdown_anchor', function(event) {
    var index = $(this).data('index');
    var title = $(this).data('title');
    populate_list(index);
    dropdownButtonText(title);
});

然后实现了下拉buttontext函数如下：

function dropdownButtonText(text) {
    $("#dropdown_button").text(text);
}

问题是，按钮跨越页面加载所需的宽度(又称style="width: 166%;"(，但是当选择发生并且更改其更改时，该按钮就不会保持其设置宽度。例如，它从166％的宽度为87％。

我该如何制作，以使该按钮在更改时保持宽度？

感谢您的投入和时间，感谢您。

可以在这里看到一个例子：https://www.trustedlivingcare.com/item/cedarhurst-of-sparta-il/

社区＆amp;附近的便利区

启动位置https://www.screencast.com/t/tiuwzdhycwc

更改后https://www.screencast.com/t/goygvtvrerw5

Answer 1

这是因为当文本的字符少于以前的字符时，按钮的宽度会发生变化。您可以在CSS中给按钮一个特定的宽度，因此文本更改时不会更改。

#dropdown_button {
width: 100px; // this is an example
}

您也可以做最小的宽度，以确保这是按钮的最小宽度。

#dropdown_button {
    min-width: 100px; // this is an example
    }

Answer 2

您可以在文本更改之前尝试抓取元素宽度：

 $(document).on('click', '.dropdown_anchor', function(event) {
          var index = $(this).data('index');
          var title = $(this).data('title');
          var width = $(this).outerWidth();
          populate_list(index);
          dropdownButtonText(title, width);
      });

，然后在新功能中应用该宽度。

 function dropdownButtonText(text, width) {
    $("#dropdown_button").css("width", width).text(text);
  }

不过，该按钮将需要显示在线块。

Answer 3

在您的CSS文件

中尝试一下

.btn-primary {
   min-width: 500px;
 }

Answer 4

在我尝试过的下方。

<div class="dropdown">
    <button id="btnTest" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="width: 80%;">Dropdown Example
    <span class="caret"></span></button>
    <ul id="demolist" class="dropdown-menu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </div>
</div>
<script type="text/javascript">
$('#btnTest').click(function() {
   console.log("Test");
});
$('#demolist li').on('click', function(){
    var selectedText = $(this).text();
    console.log(selectedText);
    $("#btnTest").html(selectedText+'&nbsp;&nbsp;<span class="caret"></span></button>');
});
</script>

另外，请咨询使用Bootstrap 3下拉切换按钮的演示