Jquery show＆hide而不是toggle

就像你會看到我是一名設計師而不是程序員，所以不要對我強硬。我有一個切換工作得很好，但我不能啓動一個簡單的顯示和隱藏腳本。我是一個寬鬆的人...... 事情是H4與切換功能獨立運作良好。但我還需要顯示所有內容並按兩個按鈕隱藏所有內容。Jquery show＆hide而不是toggle

肘節效果

$(function() { 
    $('.toggle-item').each(function(ix, el) { 

     $(this).addClass('inactive'); 
     var contentDiv = $('.toggle-content', $(el)); 
     $(this).attr('data-height', contentDiv.outerHeight()); 
     contentDiv.css('overflow', 'hidden'); 
     contentDiv.height(0); 
    }); 

    $(".toggle-item h4").click(function(){ 
     var $parent = $(this).parent('.toggle-item'); 
     if($parent.length) { 
      if($parent.hasClass('inactive')) { 
       $parent.removeClass('inactive'); 
       $('.toggle-content', $parent).height(   $parent.attr('data-height')); 
      } else { 
       $parent.addClass('inactive'); 
       $('.toggle-content', $parent).height(0); 
      } 
     } 
    }); 
});

的HTML代碼：

<div class="toggle-item"> 
    <h4>SOME TEXT AS HEADLINE</h4> 
    <div class="toggle-content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan, turpis facilisis ultricies consequat, tellus ligula sagittis libero, porttitor venenatis urna dui non quam. Fusce aliquam, libero sed eleifend pellentesque, ligula dolor porta neque, et egestas diam mauris id odio.</p> 
    </div> 
</div>

按鈕

<button id="show">Show All</button> 
<button id="hide">Hide All</button>

的目的

$(document).ready(function(){ 
    $("#show").click(function() { 
     $('.toggle-content').show(); 
    }); 
    $("#hide").click(function(){ 
     $('.toggle-content').hide(); 
    }); 
});

Here你可以找到運行的例子。

歡迎任何提示！ TIA。

來源

2012-08-09 user1586214

你失去了我......我沒有看到「The Intent」中的代碼有什麼問題。你試圖做什麼，這不是做什麼？ – 2012-08-09 21:43:15

請創建一個http://jsFiddle.net或http://jsbin.com演示並描述一下更好什麼是你的問題 – 2012-08-09 21:45:33

是的，我也失去了，因爲這個工程在[JSFiddle]（http://jsfiddle.net/DfprZ /） – Brad 2012-08-09 21:45:44

好，VIA先生曼努埃爾Cebrian，從Tiendy.com自帶的伎倆：

$(document).ready(function(){ 

    $("#show").click(function() { 
     $('.toggle-item').each(function(i) {    
      $(this).removeClass('inactive'); 
      $('.toggle-content', this).height($(this).attr('data-height')); 
     }); 
    }); 

    $("#hide").click(function(){ 
     $('.toggle-item').each(function(i) { 
      $(this).addClass('inactive'); 
      $('.toggle-content', this).height(0); 
     }); 
    }); 

});

這將打開和關閉所有，一些打開也將關閉。非常感謝Cebrian先生，並希望這可以幫助更多人。謝謝大家。

來源

2012-08-11 12:18:26 user1586214

我認爲你需要這個，只是嘗試更新腳本如下：

$("#show").click(function() { 
     $('.toggle-content').each(function(){ 
     // you need this because height goes to 0pt 
     $(this).height('auto'); 
     $(this).show(); 
     }); 
    }); 
    $("#hide").click(function(){ 
     $('.toggle-content').each(function(){ 
     $(this).hide(); 
     }); 
    });

我hoep這將有助於

來源

2012-08-10 09:39:31

Did not't help：|正如你所看到的那樣......但沒有工作。按照鏈接看到它。 ID的原件是#mostrar和#ocultar，我已更改，但沒有運氣。不管怎樣，謝謝！ – user1586214 2012-08-10 19:49:04

Jquery show＆hide而不是toggle

回答

相關問題