Question

你好我是一个新手，请你帮忙，

点击图片时，我需要一个简单的显示/隐藏切换，在“侧箭头”和“向下箭头”（如下拉列表）之间切换。这是用文本显示/隐藏单个div。但是由于进入使用id的.net，我需要在课堂上使用它。

这已经在id中，它可以在课堂上使用但需要它....

我的功能是： -

<script type="text/javascript">
$(function(){
  $('.nav-toggle').on('click', function(){
    var t = $(this);
    var imgSrc = t.attr('src');
    var divId = t.attr('id');
    $(divId).slideToggle('slow', function() {
      if (imgSrc === '_includes/img/components/toggle_icon_show.png') {
        t.attr({'src' :'_includes/img/components/toggle_icon.png'});
      } else {
        t.attr({'src' :'_includes/img/components/toggle_icon_show.png'});
      }
     });
  });
});
</script>


HTML:-

<img src="_includes/img/components/toggle_icon.png" id="#1" class="nav-toggle">

<div id="1" style="display:none">
<p>Maecenas vulputate, augue vitae sagittis molestie, ipsum neque rhoncus turpis, sit amet iaculis sapien quam sed nunc. Donec neque erat, pulvinar non ultrices sit amet, dignissim at lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi in erat sapien. Nullam mi dolor, consectetur et turpis sit am.</p></div>

谢谢！

Answer 1

http://jsfiddle.net/HHguX/2/

<ul>
    <li>
<div class="toggle_head togglebackground">
    &nbsp;<img src="images/expand.png" alt="Expand" title="Expand" class="expand">
    &nbsp;<img src="images/collapse.png" alt="Collapse" title="Collapse" class="collapse">
    <label> Cookies</label>
</div>
<div class="box toggle_body">
    <ul class="list">
        <li>
           <label disabled="disabled">Information about cookies.....</label>
        </li>
    </ul>
</div>
<!-- !END section (Cookies) -->
</li>
<li>
<div class="toggle_head togglebackground">
    &nbsp;<img src="images/expand.png" alt="Expand"  class="expand">
    &nbsp;<img src="images/collapse.png" alt="Collapse"  class="collapse">
    <label> Terms</label>
</div>
<div class="box toggle_body">
    <ul class="list">
        <li>
           <label disabled="disabled">Information about terms and conditions.....</label>
        </li>
    </ul>
</div>
<!-- !END section (Terms) -->

</li>
</ul>

$(".toggle_body").hide();
$(".collapse").hide();

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

var $this = $(this);

$this.next(".toggle_body").slideToggle(300, function() {
  $this.children('img').toggle();
});

});

Answer 2

这是我的解决方案，它涉及一个元素，用作下一个元素的触发器（点击）。

触发元素使用类反映下一个容器（打开或关闭）的状态。在启动时，脚本检查触发器是否显示下一个元素应该是否可见，然后将open / close类应用于该容器：

这是与http://jsfiddle.net/7EWTG/

一起玩的小提琴

<强>的JavaScript

jQuery(document).ready(function() {

    jQuery('.toggle-next').each(function(index) {
        var nextEl = jQuery(this).next();

        if(nextEl.is(':visible') ) {
            jQuery(this).addClass('open');
        }
        else {
            jQuery(this).removeClass('open');
        }
    });

    jQuery('.toggle-next').on('click', function(event){
        var nextEl = jQuery(this).next();

        nextEl.toggle('fast', function() {

            if(jQuery(this).is(':visible') ) {
                jQuery(this).prev().addClass('open');
            }
            else {
                jQuery(this).prev().removeClass('open');
            }

        });
    });
}); // jQuery ready

<强> HTML

    <p class="toggle-next">Toogle next content</p>

    <div class="hide">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

基本CSS

.hide {
    display:none;
}
.toggle-next {
    color:#000;
    cursor:pointer;
}
.toggle-next.open{
    color:#0f0;
}

显然，这不会使用与您相同的方法。您必须使用CSS声明将背景图像添加到默认的.toggle-next状态和.toggle-next.open，但我觉得这更清晰。

这当然不是完美的，但是一旦你有了这个系统就可以重复使用它，你不必担心“可切换”元素的初始状态及其触发器或它们各自的ID。

单击交换/切换图像时的简单显示/隐藏切换

2 个答案: