5

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

我有多个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'); 
        }
    });
});
4

4 回答 4

4

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

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

这将隐藏所有具有类文章的 div，并显示具有 id 作为新闻的 div

于 2013-10-18T13:00:53.900 回答
2

只需添加

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

在这一行之后：

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

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

于 2013-10-18T13:00:27.737 回答
1

试试这个脚本

$(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'); 
        }

    });

});
于 2013-10-18T13:30:04.450 回答
0

获取全局变量，每次点击该变量时分配 div 的对象/id，changeTextButton并获取 prevoius id 的 id 并将其隐藏

声明全局变量：

window.news;//news is global variable

隐藏/显示 div

$("#"+news).hide();
$("#newdiv").show();
于 2013-10-18T13:05:04.767 回答