onChange 按钮标签不保持其样式答案

【问题标题】：onChange Button label doesn't hold its styleonChange 按钮标签不保持其样式
【发布时间】：2019-09-21 02:14:58
【问题描述】：

我有一个有趣的问题。我有一个用于选择的按钮（如选择项）。代码在这里：

<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);
});

那么dropdownButtonText函数实现如下：

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

The problem is, that the button spans the width it needs to on page load (aka style="width: 166%;") but when the selection happens and its changed, the button then doesn't hold its set width.例如，它的含义是从 166% 到 87% 宽度。

如何使按钮在更改时保持其宽度？

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

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

社区和附近的便利设施区

起始位置 https://www.screencast.com/t/TiuWZdhYcWc

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

【问题讨论】：

你能做一个sn-p来演示这个问题吗？更改文本不会更改宽度除非原始文本比允许的宽度更宽并且它强制元素扩展以适应（基于其他 css 属性）。
@freedomn-m 我添加了一个指向示例页面的链接，以便您查看。
a) 外部站点由于历史原因没有用 b) 我不知道导致问题的那个页面
我刚刚添加了两个屏幕截图，以便您查看
你的代码中没有 dropdown_anchor 类

标签： javascript jquery html css styles

【解决方案1】：

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

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

你也可以做 min-width 以确保这是按钮的最小宽度。

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

【讨论】：

【解决方案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);
  }

不过，按钮需要显示 inline-block。

【讨论】：

如果你使用jQuery，你可以使用outerWidth（上面编辑过）。
这似乎得到了单词的外部宽度，而不是按钮
那你需要获取按钮的宽度。将var width = $(this).outerWidth(); 更改为var width = $("#dropdown_button").outerWidth();

【解决方案3】：

在你的css文件中试试这个

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

【讨论】：

这会在加载时修改切换，但在更改后不会执行任何操作。
兄弟，我编辑了我的答案。试试这个并告诉我它是否有效

【解决方案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>

另外，请参阅using Bootstrap 3 Dropdown toggle button 的演示

【讨论】：