0

To change selector so it only show/hides when i click the image i put spoiler/ popdown menu directly after .OS image. Right now the popdown is a child of the .OS container, so clicks on it are passed to the .OS click handler.

But the code isn't perfect because when i click the 1st MAC both spoilers are opened.

But I want that spoilers are opened one at a time

But the main problem is that I can't fix the javascript code properly inside these types of spoilers (dokuwiki class) inside <td> tags:

This is the javascript code I use :

<div class="dokuwiki">
    <div class="right_page">
        <div class="entry-content">
            <script type="text/javascript" src="./zzzz_files/jquery.js"></script>
            <script type="text/javascript">                                         
                $(document).ready(function(){
                    $(".nonjs").removeAttr( "href"); //href is needed for users without JS
                    $('.OS').click(function(){
                        if($(".details").is(":visible"))
                        {
                            $(".details").not(":hidden").hide("slow");
                            return true;
                        }
                        else
                        {
                            $(".OS").not(this).each(function(i) {
                                $(".details").hide("slow");
                            });
                            $(".details").show("slow");
                            return false;
                        }
                    });
                });  
            </script>     
            <style type="text/css">
                <!--
                .details {
                    display: none;
                    clear: both;
                    padding: 2px;
                }
                .nonjs{
                    cursor:pointer;
                }
                img {
                    border: 0px;
                }
                -->
            </style>

I thought about doing a video to better explain the problem and provide the local version of files for testing code:

Thanks in advance

4

2 回答 2

1

此代码有效：

 $(document).ready(function(){
 $(".nonjs").removeAttr( "href"); 
//href is needed for users without JS

 $('.OS').click(function(e){
           if(!$(e.target).parents('.details').length){
                        if($(this).find('.details').is(":visible"))
                        {
                            $(this).find('.details').not(":hidden").hide("slow");
                            return true;
                        }
                        else
                        {

                            $(this).find('.details').show("slow");
                            return false;
                        }
          }
});
 });
于 2012-08-04T02:25:18.133 回答
0

我不知道你在问什么，但这是我认为你想要的：

单击图像时，显示其下方的详细信息并隐藏所有其他图像。如果详细信息已经可见，请将其隐藏。单击详细信息中的某些内容不应影响任何内容。

演示

$(document).ready(function(){
  $(".nonjs").removeAttr( "href"); //href is needed for users without JS
  $('.OS').click(function(){
    var details = $(this).next(".details");
    $(".details").hide("slow");
    if(details.is(":hidden")) {
      details.show("slow");
    }
  });
});
于 2012-08-03T14:39:12.490 回答