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并显示具有id作为新闻的div

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();

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

4 个答案: