2

我有这段代码在点击时显示/隐藏 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 更改时，它会显示为普通文本。我必须做出哪些改变？

4

5 回答 5

14

试试inline-style喜欢

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

使用internal/external-style类似

#showmenu {
     font-weight : bold ;
}
于 2013-09-02T09:41:05.823 回答
3

您可以使用 CSS字体粗细设置。

将此添加到您的 CSS 中：

#showmenu {
   font-weight: bold;
}
  • 添加后，您可以从按钮的内容中删除<b>标签。
于 2013-09-02T09:40:10.013 回答
3

将此添加到您的样式表中？

button {
   text-weight: bold;
}
于 2013-09-02T09:41:07.193 回答
0

只需将您的选择器更改为

  $('#showmenu b').text($('.menu').is(':visible') ? 'Show Menu' : 'Hide Menu');
      //-------^---here
于 2013-09-02T09:41:23.567 回答
0

您可以像这样使用 .html 而不是 .text

$(document).ready(function() {

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

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

于 2013-09-02T11:25:11.033 回答