2

您好，我是新手，请您帮忙，

单击图像时，我需要一个简单的显示/隐藏切换，它在“侧箭头”和“向下箭头”（如下拉菜单）之间切换。这是用文本显示/隐藏单个 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>

谢谢！

4

2 回答 2

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

});
于 2013-10-02T12:14:42.277 回答
1

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

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

这是一个玩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但我认为这更干净。

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

于 2013-10-02T12:34:37.127 回答