使用可见性的Jquery众多加/减按钮

时间：2015-01-09 09:26:18

标签： javascript jquery html css

我尝试修改此问题答案中的解决方案：

Jquery toggle (Click to show one div while hiding others)

但显示/隐藏我需要更改可见/隐藏状态，这是因为我的div元素必须占用页面上的空间，保留在固定位置而不是下拉。 这是我的jquery代码：

$(".sticker").click(function(){
    var gid = $(this).attr('id');
    var id = gid.split("-")[1];

    if ($(this).children("img").attr("src")=="img/plus.png") {
        $(this).children("img").attr("src","img/minus.png");
        $('#'+id).addClass('visible');
    } 
    else {
        $(this).children("img").attr("src","img/plus.png");
        $('#'+id).removeClass('visible');
    }

});

html代码：

<div id="container">
 <div class="more" id="one">
  <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
 </div>
<div class="sticker" id="sticker-one"><img src="img/plus.png" width="28" height="28" /></div>

 <div class="more" id="two">
  <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
 </div>
 <div class="sticker" id="sticker-two"><img src="img/plus.png" width="28" height="28" /></div>

 <div class="more" id="three">
  <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
 </div>
 <div class="sticker" id="sticker-three"><img src="img/plus.png" width="28" height="28" /></div>
</div>

＆＃34;可见＆＃34; css class is = 

.visible {
    visibility:visible;
}

Fiddle Demo

我想隐藏对＃34; .more＆＃34;点击一个新的＆＃34;贴纸＆＃34;为了每次只打开一个div。

2 个答案:

答案 0 :(得分：0)

您的代码似乎运行正常。您可能只需要设置!important，因为它似乎在类更改时不会显示

.visible {
    visibility:visible !important;
}

这里也是一个更紧凑的修改代码。 

$(".sticker").click(function() {

  var $t = $(this);
  var $img = $t.children("img");

  if ($img[0].src.indexOf('plus') > -1) {
    $img[0].src = 'img/minus.png';
    $t.prev('.more').addClass('visible');
  } else {
    $img[0].src = 'img/plus.png';
    $t.prev('.more').removeClass('visible');
  }

});
.visible {
  visibility: visible !important;
}
.more {
  visibility: hidden;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="container">
  <div class="more" id="one">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-one">
    <img src="img/plus.png" width="28" height="28" />
  </div>

  <div class="more" id="two">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-two">
    <img src="img/plus.png" width="28" height="28" />
  </div>

  <div class="more" id="three">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-three">
    <img src="img/plus.png" width="28" height="28" />
  </div>
</div>

以下是您的行动代码 

$(".sticker").click(function(){
    var gid = $(this).attr('id');
    var id = gid.split("-")[1];

    if ($(this).children("img").attr("src")=="img/plus.png") {
        $(this).children("img").attr("src","img/minus.png");
        $('#'+id).addClass('visible');
    } 
    else {
        $(this).children("img").attr("src","img/plus.png");
        $('#'+id).removeClass('visible');
    }

}); 
.visible {
  visibility: visible !important;
}
.more {
  visibility: hidden;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="container">
  <div class="more" id="one">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-one">
    <img src="img/plus.png" width="28" height="28" />
  </div>

  <div class="more" id="two">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-two">
    <img src="img/plus.png" width="28" height="28" />
  </div>

  <div class="more" id="three">
    <div class="info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="sticker" id="sticker-three">
    <img src="img/plus.png" width="28" height="28" />
  </div>
</div>

答案 1 :(得分：0)

使用可见性和显示解决了这两个问题。

  1. display = none / block：

    2. CSS 

    .visible {
 display: none;
 }

    JS 

        $(document).ready(function(){
    $(".sticker").each(function() {
        var $t = $(this);
        var $img = $t.children("img");
        var $m = $t.prev();

        $($t).on('click', function(){
            if ($img[0].src.indexOf('plus') > -1) {
                $img[0].src = 'img/minus.png';
                $t.prev('.more').toggle();
              } else {
                $img[0].src = 'img/plus.png';
                $t.prev('.more').toggle();
              } 
            $('.more').not($m[0]).hide();   
            var r = $('.sticker').children("img").not($img);
            r[0].src = 'img/plus.png';
            r[1].src = 'img/plus.png';
        });
    });
    });
    1. visibility = hidden / visible：

      2. 在每个点击事件中放入数组中的“.more”div。

      例如，点击5次后的数组将是：

      arr = [“zero”，div＃one.more，div＃two.more.visible，div＃three.more，div＃two.more.visible，div＃one.more]

      然后创建2个变量$ prev和$ current。

      $ prev获取之前打开过的“.more”div的id，“$ current”获取当前打开的div的id。 然后删除前一个div处的'visible'类，并在当前div处添加'visible'类。

      CSS 

      .more {
  position: absolute;
  visibility:hidden;
 }

.visible {
  visibility: visible;
}

      JS 

          $(document).ready(function() {
    var i = 0;
    var $arr = Array();

    $arr[i] = "zero";

    $(".sticker").each(function() {
        var $t = $(this);
        var $img = $t.children("img");
        var $m = $t.prev();

        function change() {
            $img[0].src = 'img/minus.png';
            $t.prev('.more').addClass('visible');
        }


        $($t).on('click', function() {
            var $d = $m[0];
            i++;

            $arr[i] = $d;

            $prev = $($arr[i - 1]).attr('id');

            $current = $($arr[i]).attr('id');

            if ($img[0].src.indexOf('minus') > -1) {

                $img[0].src = 'img/plus.png';
                $t.prev('.more').removeClass('visible');
            } else if (i > 1 && $img[0].src.indexOf('plus') > -1 && $prev != $current) {

                $("#" + $prev).removeClass('visible');

                var myimg = $("#" + $prev).next('.sticker').children("img");

                myimg[0].src = 'img/plus.png';

                change();

            } else if ($img[0].src.indexOf('plus') > -1 && $prev == $current || $arr[1]) {

                change();
            }
        });
    });
});
相关问题
最新问题