想打开另一个div时关闭一个div

Question

我已经能够让我的div打开并改变图像，但我想要发生的是当我打开一个，另一个关闭，我不知道该怎么做。

我有这样的多个div 。 新闻的每个id都是它自己的个人名称：

<div class="article" id="news">
    <h2>Hot News: Board Votes to Improve Highways</h2>
    <p>As Sporktown’s native and tourist population has increased, so has traffic. The good news is we are taking steps to deal with it. Before traffic becomes too much of a problem we have a plan to expand current highways and improve current ones.</p>
    <div class="moreText">
        <p>
            As part of the new plan, Route 7 will be expanded from a two-way highway to a four-lane highway. This will dramatically speed up North–South travel through that corridor.
        </p>
        <p>
            In addition to the road widening on Route 7, we have finally received approval to for the extension. The original plan called for Route to continue farther North. The project is finally cleared and work has already begun.
        </p>
    </div>
    <img src="img/more-button.png" width="51" height="16" class="changeTextButton">    
</div>

这是我到目前为止的jquery脚本：

$(document).ready(function() 
{
    $('.changeTextButton').click( function() 
    {
        $(this).siblings('.moreText').slideToggle(500);
        if ( $(this).attr('src') == 'img/more-button.png') 
        {
            $(this).attr('src', 'img/less-button.png');
        }
        else 
        {
            $(this).attr('src', 'img/more-button.png'); 
        }
    });
});

Answer 1

你可以使用类.articles关闭所有其他div，然后使用div的相应id来显示

$(".articles").hide();
$("#news").show();

这将隐藏所有具有类清晰度的div并显示div具有id作为新闻

Answer 2

只需添加

$('.moreText').slideUp();

在这一行之后：

$('.changeTextButton').click( function() {

这将向上滑动“.moreText”的所有实例，但当前打开的实例除外。

Answer 3

试试这个脚本

$(document).ready(function() {
var $parentid = "";

    $('.changeTextButton').click( function() {

          if($parentid!="" && $parentid!=$(this).parent().attr("id")){
               $("#"+$parentid).find(".moreText").slideUp();
          }

        $(this).siblings('.moreText').slideToggle(500);
        $parentid=$(this).parent().attr("id");

        if ( $(this).attr('src') == 'img/more-button.png') {
            $(this).attr('src', 'img/less-button.png');
        }
        else {
            $(this).attr('src', 'img/more-button.png'); 
        }

    });

});

Answer 4

获取全局变量，每个changeTextButton上的div的赋值对象/ id单击此变量并获取prevoius id的id并隐藏它

声明全局变量：

window.news;//news is global variable

隐藏/显示div

$("#"+news).hide();
$("#newdiv").show();