Question

我有这个代码显示/隐藏点击div。

<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
       <title>slide demo</title>
         <style>
           #showmenu {
               background: '#5D8AA8';
               border-radius: 35px;
               border: none;
           height:30px;
           width:140px;
           }

        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
     </head>
    <body>
      <div ><button id="showmenu" type="button"><b>Show menu</b></button></div>
     <div class="menu" style="display: none;">
        Can the button value change to "show" or "hide"
     </div>
     <script>
        $(document).ready(function() {
        $('#showmenu').click(function() {
        $('#showmenu').text($('.menu').is(':visible') ? 'Show Menu' : 'Hide Menu');
        $('.menu').toggle("slide");
       });
     });
     </script> 
 </body>
</html>

一切正常。但我希望文本以粗体显示。我怎样才能做到这一点？这是第一次大胆。但是当文本从jQuery更改时，它将显示为普通文本。我必须做出哪些改变？

Answer 1

您可以使用CSS font-weight设置。

将此添加到您的CSS：

#showmenu {
   font-weight: bold;
}

添加此内容后，您可以从按钮的内容中删除<b>标记。

Answer 2

尝试inline-style喜欢

<button id="showmenu" type="button" style="font-weight:bold;">show menu</button>

使用internal/external-style使用

#showmenu {
     font-weight : bold ;
}

Answer 3

将它添加到样式表？

button {
   text-weight: bold;
}

Answer 4

只需将选择器更改为

即可

  $('#showmenu b').text($('.menu').is(':visible') ? 'Show Menu' : 'Hide Menu');
      //-------^---here

Answer 5

您可以使用.html代替.text这样的

$(document).ready(function() {

  $('#showmenu').click(function() {
    $('#showmenu').html($('.menu').is(':visible') ? '<b>Show</b>' : '<b>Hide</b>');
    $('.menu').toggle("slide");
  });
});

这是一个Fiddle，如果您希望代码有效，请不要使用HTML5的内联样式。

将按钮文本更改为粗体

5 个答案: