Jquery 个使用可见性的 plus/minus 个按钮

Question

我尝试修改在这个问题的答案中找到的解决方案：

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

但代替 show/hide 我需要更改 visible/hidden 状态，这是因为我的 divs 元素必须占用页面上的 space位置而不是下拉。这是我的 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>

"visible"cssclass是=

.visible {
    visibility:visible;
}

Fiddle Demo

我想在单击新 "sticker" 时也隐藏打开 div 的“.more”的可见性，以便每次只打开一个 div。

Answer 1

您的代码似乎运行良好。您可能只需要设置 !important 因为它似乎不会在 class 更改

时变得可见

.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>

Answer 2

使用可见性和显示都解决了。

显示=none/block:

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';
        });
    });
    });

能见度 = hidden/visible:

在每个点击事件中放入数组中的“.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”的iddiv，“$current”获取当前打开的iddiv。然后去掉前面div处的'visible'class，在当前div处加上'visible'class。

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();
            }
        });
    });
});

Jquery 个使用可见性的 plus/minus 个按钮

Jquery multitude plus/minus buttons using visibility

html

javascript

css

jquery