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

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

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

触发器元素反射(reflect)了具有类的下一个容器的状态(打开或关闭)。启动时，脚本检查触发器是否指示下一个元素应该可见，然后将打开/关闭类应用于该容器:

这是一个可以玩的 fiddle 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。