doushan7997
2013-03-14 22:10 浏览 21

jquery切换问题

I am using jquery toggle to show a div with content. Not sure how to explain the issue I am having, but if you go to my test page and click on the first link for Similar Movies (it coincides with the movie 500 Days of Summer) you'll see a panel open with the similar movies. If you go to the next Similar Movies link (coinciding with 10 Things I Hate About You) you'll see that it still controls the first set of movies, meaning it toggles the panel up and down. In fact, all of the Similar Movies links control the first panel. Not sure how to fix this. *REMOVED LINK- NO LONGER NECESSARY- THANKS!

<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script> 

<div class="flip">Similar Movies
</div><!-- end of flip-->

    <div id="panel">
similar movies are echoed here from a database using php...
</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答 默认 最新

  • 已采纳
    doufang2228 doufang2228 2013-03-14 22:13

    Instead of using an ID for your panels, use a class, like this:

    <div class="panel">
      similar movies are echoed here from a database using php...
    </div>
    

    Then in your jQuery:

    $(document).ready(function() {
      $(".flip").click(function() {
        $(this).siblings(".panel").slideToggle("slow");
      });
    });
    

    Using the same ID on more than one element is not recommended, and will especially present problems when using jQuery.

    点赞 评论 复制链接分享
  • dongqiangteng7319 dongqiangteng7319 2013-03-14 22:13

    that's because you have many div with the same "id". You can fix it using this code:

    $(document).ready(function(){
    $(".flip").click(function(){
        $(this).next().slideToggle("slow");
      });
    });
    
    点赞 评论 复制链接分享
  • dou426098 dou426098 2013-03-14 22:14

    That is because your click function is only toggling the div with id of panel, which is the first id. If you have other div's with this id, they will be ignored since id's must be unique and jQuery will just find the first id with the specified value and work with it. You should change from id="panel" to class="panel" and modify your jQuery function to look for the next sibling element with class panel and toggle it.

    The code could look like this:

    $(document).ready(function(){
        $('.flip').click(function(){
            $(this).next('.panel').slideToggle('slow');
        });
    });
    
    点赞 评论 复制链接分享
  • doujingao6210 doujingao6210 2013-03-14 22:38

    Try something like;

    <div class="container">
    <div class="flip">Similar Movies
    </div><!-- end of flip-->
    
        <div class="panel">
    similar movies are echoed here from a database using php...
    </div>
    </div>
    
    var panel;
    $(".flip").click(function(){
        panel = $(this).parent('.container').children('.panel');
        panel.slideToggle("slow");
     })
    
    点赞 评论 复制链接分享

相关推荐