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顯示無默認不工作

回答

相關問題