Jquery 显示/隐藏多格问题答案

【问题标题】：Jquery show/hide multi-div questionsJquery 显示/隐藏多格问题
【发布时间】：2014-03-20 22:28:17
【问题描述】：

现在，如果您单击链接“Button1”或“Button2”，它始终会显示“First Block”和“Second block”或“Third block”。但是当您再次单击链接时，第二个或第三个块将被隐藏，但仍会显示第一个块。如果通过单击隐藏其他块，我需要删除第一个块。只有在显示另一个块时才应显示第一个块。

如果显示所有块，则链接“全部显示”应更改为“全部隐藏”，如果未显示块，则应更改为“全部显示”。区块数量将超过三个。

JAVASCRIPT

 <script type="text/javascript">    
$(document).ready(function(){
var visibleText="Hide all";
var hiddenText="Show all";
$('a#showall').toggle( 
    function() { 
        $('#eventDescriptions>div').slideDown(); 
        $(this).html(visibleText);
    }, 
    function() { 
        $('#eventDescriptions>div').slideUp(); 
        $(this).html(hiddenText);
    } 
);
  $('#eventDescriptions>div').hide();
  $('#eventTitles a').click(function(){
    var target = $(this).attr("rel");
    $(target).slideToggle('slow');
    $('#showalways').show();
  });
});
</script>

HTML

a href="#" id="showall">Show all</a>

<ul id="eventTitles">

    <li><a href="#" id="button1" rel="#divblock1">Button1</a></li>
    <li><a href="#" id="button2" rel="#divblock2">Button2</a></li>
</ul>
<div id="eventDescriptions">
  <div id="showalways">First Block</div>
  <div id="divblock1">Second Block</div>
  <div id="divblock2">Third Block</div>
</div>

【问题讨论】：

所以在第二个和第三个按钮的点击事件中隐藏第一个块。不过这个名字很有趣：showalways。
只有在没有显示其他块时才隐藏第一个块。如果显示任何第二个和其他块，则应显示第一个块。
我不认为你可以单独使用这三个 div 的点击事件。您需要添加另一个将首先显示并隐藏其他两个的事件。然后，如果任何事件导致显示第二个或第三个，则显示第一个。也许是每隔几秒钟触发一次以检查第二个和第三个是否都隐藏的事件？

标签： jquery css html show-hide

【解决方案1】：

在 divblock1 和 divblock2 中添加隐藏事件

你在哪里

检查其他 divblock 是否也被隐藏并添加：

 $('#showalways').hide();

对于 divblock1 和 divblock2 的显示事件：

 $('#showalways').show();

【讨论】：