Question

大家好，我实际上遇到了一个问题我有多个加号和减号div，点击它应该显示内容。但是当我点击一个加号图标时，另一个图标执行显示和隐藏内容的操作。

<html>
<body>
<div class="expandContent1"><a><h1><img id="arrow1" src="plus.png">One</h1>   </a>

</div>
<div class="showMe1" style="display:none">This content was hidden, but now shows up</div>

<script>
var div_show = $('.showMe1'),
arrow = $('#arrow1');
 $('.expandContent1').click(function () {
div_show.slideToggle('slow', function () {
    if ($(this).is(':visible')) {
        arrow.prop('src', 'minus.png');
    } else {
        arrow.prop('src', 'plus.png');
    }
   });
 });
 </script>
  </div>
   <div class="expandContent2"><a><h1><img id="arrow2" src="plus.png">Two</h1></a>

</div>
<div class="showMe2" style="display:none">This content was hidden, but now shows up</div>

<script>
var div_show = $('.showMe2'),
arrow = $('#arrow2');
$('.expandContent2').click(function () {
div_show.slideToggle('slow', function () {
    if ($(this).is(':visible')) {
        arrow.prop('src', 'minus.png');
    } else {
        arrow.prop('src', 'plus.png');
    }
  });
  });
</script>
     </body>
     </html>

Answer 1

你可以试试这个：

<强> HTML：

<div class="expandContent">
    <a><h1><img src="plus.png">One</h1></a>
</div>
<div class="showMe" style="display:none">
    This content was hidden, but now shows up
</div>
<div class="expandContent">
    <a><h1><img src="plus.png">Two</h1></a>
</div>
<div class="showMe" style="display:none">
    This content was hidden, but now shows up
</div>

<强> JS：

$('img')
    .on('click', function(ev) {
        ev.preventDefault();
        var $this = $(this), $content = $this.closest('div').next('div.showMe');
        $('div.showMe')
            .not($content[0])
            .slideUp('slow', function () {
                $('img')
                    .not($this[0])
                    .prop('src', 'minus.png');
        });
        $content
            .slideToggle('slow', function () {
                if($content.is(':visible')) {
                    $this
                        .prop('src', 'plus.png');
                } else {
                    $this
                        .prop('src', 'minus.png');
                }
        });
    });

这是FIDDLE。

Answer 2

实际上，您不需要为每个div块创建单击函数。这可以通过jquery轻松处理

UPADTED代码 - 此处理正确切换图像（加上＆amp;减号）也会折叠除点击的图像之外的其他div

 $("div[class*='expandContent']").click(function () {
    $("div[class*='expandContent']").not(this).next('div').hide();
    $('img',$("div[class*='expandContent']").not(this)).prop('src', 'http://www.scheiblecker.com/wp-content/themes/crius-child/images/icon_plus.png');
    $maindiv = $(this);
    $(this).next('div').slideToggle('slow', function () {
        if($(this).is(':visible')){
            $('img',$maindiv).prop('src', 'https://cdn2.iconfinder.com/data/icons/drf/PNG/minus%20white.png');
        } else {
            $('img',$maindiv).prop('src', 'http://www.scheiblecker.com/wp-content/themes/crius-child/images/icon_plus.png');
        }
    });
});

选择器＆＃34; div [class * =＆＃39; expandContent＆＃39;]＆＃34;将在所有div s that have a class starting with expandContent`

上应用click功能

查看此处更新的演示 - http://jsfiddle.net/68uvf0c3/2/

Answer 3

您可以使用此代码代替您的js代码

$(document).ready(function(){
    $('div[class^="expandContent"]').on('click',function(){
        var $this = $(this);
        alert($this.index());  $('div[class^="expandContent"]').next('div[class^="showMe"]').not($this.next('div[class^="showMe"]')).slideUp();
        $('div[class^="expandContent"]').next('div[class^="showMe"]').not($this.next('div[class^="showMe"]')).find('img[id^="arrow"]').attr('src','minus.png');
        $this.next('div[class^="showMe"]').slideToggle(1000, function(){
            var changeSrc = (($this.find('img[id^="arrow"]').attr('src')) == 'plus.png') ? 'minus.png' : 'plus.png';
            $this.find('img[id^="arrow"]').attr('src',changeSrc);
        });

    });
});

DEMO

您的完整代码将是

<div class="expandContent1"><a><h1><img id="arrow1" src="plus.png">One</h1></a></div>

<div class="showMe1" style="display:none">This content was hidden, but now shows up</div>

<div class="expandContent2"><a><h1><img id="arrow2" src="plus.png">Two</h1></a></div>

<div class="showMe2" style="display:none">This content was hidden, but now shows up</div>

<script>
$(document).ready(function(){
    $('div[class^="expandContent"]').on('click',function(){
        var $this = $(this);
        alert($this.index());  $('div[class^="expandContent"]').next('div[class^="showMe"]').not($this.next('div[class^="showMe"]')).slideUp();
        $('div[class^="expandContent"]').next('div[class^="showMe"]').not($this.next('div[class^="showMe"]')).find('img[id^="arrow"]').attr('src','minus.png');
        $this.next('div[class^="showMe"]').slideToggle(1000, function(){
            var changeSrc = (($this.find('img[id^="arrow"]').attr('src')) == 'plus.png') ? 'minus.png' : 'plus.png';
            $this.find('img[id^="arrow"]').attr('src',changeSrc);
        });

    });
});
</script>

多个可折叠的div无法正常工作

3 个答案: