jquery显示无默认不工作

我基本上想要一个管理工具栏，它会有一个按钮，可点击显示是（adminbarplus），点击它将滑动工具栏和滑动adminbarplus，因为管理工具栏有它的自己的隐藏按钮（adminbarminus）。但是，我需要将该栏默认隐藏，并且添加内联HTML以显示none都不起作用，因为默认情况下它将替换为display：block。jquery显示无默认不工作

这里是我的html：

<div class="row adminbar" id="adminbar" style="display: none;"> 
    <div class="row adminbaroverlay"> 
      <div class="large-2 columns"> 
       <div class="row valign-middle"> 
        <div class="large-12 columns content2 adminbarsidebar"> 
         <%= image_tag('admintitle.png') %> 
        </div> 
      </div> 
     </div> 
     <div class="large-9 columns"> 
      <div class="row valign-middle"> 
       <div class="large-12 columns adminbarsidebar"> 
      <p class="margin0b padding0b margin0t padding0t"><span class="adminbutton">Manage Users</span> 
      <span class="adminbutton">Manage Branches</span> 
      <span class="adminbutton">Manage News</span></p>      
       </div> 
      </div> 
     </div> 
     <div class="large-1 columns adminarrow" id="adminbarminus"> 
      <div class="row valign-middle"> 
       <div class="large-12 columns adminbarsidebar text-center"> 
        <a href="#"><%= image_tag('minusicon.png') %></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<span class="adminbarplus">ADMIN BAR</span>

这里是我的jQuery：

   $("#adminbarminus").click(function(){ 
       $("#adminbar").slideUp(); 
       $(".adminbarplus").slideDown(); 
      }); 

      $(".adminbarplus").click(function(){ 
       $("#adminbar").slideDown(); 
       $(".adminbarplus").slideUp(); 
      });

会很感激一些帮助，谢谢。

来源

2014-11-22 Jay McNaught

它的工作原理我的罚款，在这个代码是没有问题的 - http://jsfiddle.net/5eLd4L2h/ – panther 2014-11-22 17:03:54

是那隐藏不应该有别的东西覆盖它的特殊性 - 哪里是覆盖从哪里来？你用浏览器检查员看？ – 2014-11-22 17:06:01

这里可能缺少信息 - 这是否也使用bootstrap或其他一些框架？ – 2014-11-22 17:07:08

  $("#adminbar").click(function(){ 
      $("#adminbar").slideUp(); 
      $(".adminbarplus").slideDown(); 
     }); 

     $(".adminbarplus").click(function(){ 
      $("#adminbar").slideDown(); 
      $(".adminbarplus").slideUp(); 
     });

你给了错误的ID ....... http://jsfiddle.net/z817oy53/

来源

2014-11-22 17:07:36 asimshahiddIT

高度reccomend你不使用jQuery的动画之类的东西，只是做与CSS3过渡或动画和使用jQuery仅用于切换类。

<div id="bar"> 
    <span class="minus">minus</span> 
</div> 

<span class="plus">plus</span> 

<style> 
    #bar{ 
     transition: transform .5s ease; 
     transform: translateY(-100%); 
    } 
    #bar.isActive{ 
     transform: translateY(0%); 
    } 
</style> 

<script> 

    $(function(){ 

     var bar = $("#bar"), 
      plus = $(".plus"), 
      minus = $(".minus"); 

     plus.click(function(){ 
      bar.addClass("isActive"); 
     }); 
     minus.click(function(){ 
      bar.removeClass("isActive"); 
     }); 

    }); 
</script>

来源

2014-11-22 17:18:19 Smile0ff

jquery显示无默认不工作

回答

相关问题