Question

我需要你在jQuery中的帮助。当我在网页上只使用一次时，有一个运行良好的toogle脚本。但我想如果它在多种解决方案中有效。链接（id =＆＃34; clickme＆＃34;）被点击以使下一个div有效，其中包含id =＆＃34; me＆＃34;。

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

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



<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
         $('#clickme').click(function() {
              $('#me').animate({
                   height: 'toggle'
                   }, 200
              );
         });
    });
</script>

你能帮我解决这个问题吗？提前谢谢。

姿态

Answer 1

不要使用id但使用class =“clickme”

 $(document).ready(function() {
                 $('.clickme').click(function() {
                      $(this).next('#me').animate({
                           height: 'toggle'
                           }, 200
                      );
                 });
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p  class="clickme" style="cursor:pointer;">Details</p>
    ...
    Here it is programming.
    ... 
    <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>
    ...
    Here it is programming.
    ... 
    <div id="me" style="display: none; background-color: blue;">
    Here is the text, which appears for clicking above.
    </div>

Answer 2

如果您只想切换下一个＆＃34;＆＃34;你应该这样做：

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



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

编辑：更新，立即尝试

检查那个小提琴： http://jsfiddle.net/fovk8ntu/1/

Answer 3

一页只有一个ID！如果有超过2个id，则应使用class而不是id。我的英语很差，我希望你可以理解

jQuery多个切换有效下一个div

3 个答案: