Question

我有两个问题。 1.当我点击第一个'详细信息'时，文本在下面打开，但我想如果我打开第二个'详细信息'，第一个要关闭。 2.同样重要的是，“细节”将在代码的早期应用。 class =“clickme”和id =“＃me”之间会有一些队列在这种情况下，代码无效。

<p class="clickme" style="cursor:pointer;">Details</p>
<div id="me" style="display: none; background-color: yellow;">
Here is the text, which appears for clicking above.
</div>

<p class="clickme" style="cursor:pointer;">Details</p>
<div>hello</div>
<div id="me" style="display: none; background-color: blue;">
Here is the text, which appears for clicking above.
</div>

         $('.clickme').click(function() {
              //.next take the next DOM element
              $(this).next('#me:first').animate({
                   height: 'toggle'
                   }, 200
              );
         });

你能帮帮我吗？

最诚挚的问候，姿态

                <div id="cs_containter">
                    <div id="cs_left">
                        <div id="cs_left_image">
                        </div>
                    </div>
                    <div id="cs_right">
                        <div id="cs_right_main">
                            <div id="cs_right_main_title">
                                <h1 class="cs_aj_cim">Something New</p>
                            </div>
                            <div id="cs_right_main_content">
                                <p class="cs_short_description">
                                Minimum text is...
                                </p>
                            </div>
                            <div id="cs_right_main_bottom">
                                <div id="cs_right_main_bottom_left">
                                    <div id="csrmbr_ker">
                                        <p class="cs_reszletek_ar">Like</p>
                                    </div>
                                </div>
                                <div id="csomag_right_main_bottom_right">
                                    <div id="csrmbr_keret">
                                        <p class="clickme csomag_reszletek_ar" style="cursor:pointer;">It cannot be working...</p>
                                    </div>
                                </div>
                                <div id="clear"></div>
                            </div>
                            <div id="clear"></div>
                        </div>
                    </div>
                    <div id="clear"></div>
                </div>
                    <div class="me" style="display: none; background-color: yellow;">
                        Text which is yellow
                    </div>

                        <div id="cs_containter">
                    <div id="cs_left">
                        <div id="cs_left_image">
                        </div>
                    </div>
                    <div id="cs_right">
                        <div id="cs_right_main">
                            <div id="cs_right_main_title">
                                <h1 class="cs_aj_cim">Something New</p>
                            </div>
                            <div id="cs_right_main_content">
                                <p class="cs_short_description">
                                Minimum text is...
                                </p>
                            </div>
                            <div id="cs_right_main_bottom">
                                <div id="cs_right_main_bottom_left">
                                    <div id="csrmbr_ker">
                                        <p class="cs_reszletek_ar">Like</p>
                                    </div>
                                </div>
                                <div id="csomag_right_main_bottom_right">
                                    <div id="csrmbr_keret">
                                        <p class="clickme csomag_reszletek_ar" style="cursor:pointer;">It cannot be working...</p>
                                    </div>
                                </div>
                                <div id="clear"></div>
                            </div>
                            <div id="clear"></div>
                        </div>
                    </div>
                    <div id="clear"></div>
                </div>
                    <div class="me" style="display: none; background-color: yellow;">
                        Text which is yellow
                    </div>


<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
var $mes = $('.me')
$('.clickme').click(function () {
    //.next take the next DOM element
    var $me = $(this).nextAll('.me:first').animate({
        height: 'toggle'
    }, 200);
    $mes.not($me).hide();
});
</script>

Answer 1

首先，由于您有多个元素，因此使用class而不是me元素的id。元素的ID必须是唯一的

var $mes = $('.me')
$('.clickme').click(function () {
    //.next take the next DOM element
    var $me = $(this).nextAll('.me:first').animate({
        height: 'toggle'
    }, 200);
    $mes.not($me).hide();
});

演示：Fiddle

jQuery切换 - 一个打开，其他隐藏 - 代码中的任何地方

1 个答案: