Question

我目前有一个按下按钮，用于显示新文本/隐藏旧标题。我目前将代码设置为

$('a.btn-navbar').click(function(){
            $('header#header-top').css('height','');
            $('#headerContainer').css('height','');
             $('#headerText').css('visibility','hidden');
        });

如果再次单击按钮以隐藏下拉菜单按钮，我将如何重新启用headertext？

我正在考虑使用切换，但我不是百分之百确定它是否有效，并且认为最好得到一个意见。

编辑。我使用.toggle（）来使它工作。我之前没有使用过的问题是它与下拉所需的按钮略微重叠。添加z-index：-1;让我绕过这个。

Answer 1

尝试使用三元运算符

编写条件

$('a.btn-navbar').click(function(){
   var header = $('#headerText');
   header.css('visibility',header.css('visibility') === 'hidden' ? 'visible' : 'hidden');
});

或者使用.toggleClass（），

用三元运算符写

.visible { visibility:visible; }
.hidden { visibility:hidden; }

$('a.btn-navbar').click(function(){
   var header = $('#headerText');
   header.toggleClass('hidden visible');
});

Answer 2

以下是一个例子：

$('a.btn-navbar').click(function(){
            $('header#header-top').css('height','');
            $('#headerContainer').css('height','');
             $('#headerText').toggle();
        });

Answer 3

使用（：可见）选择器 $（＆＃39; a.btn-导航栏＆＃39）。单击（函数（）{

         if ( $("#headerText").is(":visible") ) 
          {
            $('header#header-top').css('height','');
            $('#headerContainer').css('height','');
            $('#headerText').hide();
          }else{
            $('#headerText').show();
         }
    });

在点击按钮后隐藏文本后再次显示文本

3 个答案: