Question

它应该如何工作：按钮＆＃34;显示照片＆＃34;打开＆＃34;内容1＆＃34;，＆＃34;显示视频＆＃34;打开＆＃34;内容2＆＃34;，＆＃34;显示地图＆＃34;打开＆＃34;内容4＆＃34;

Switch-1＆＃34;显示照片＆＃34; ＆LT; - ＆GT; ＆＃34;显示视频＆＃34;。此模式正常运行
Switch-2＆＃34;显示地图＆＃34; - ＆GT; ＆＃34;显示照片＆＃34;或＆＃34;显示视频＆＃34; （取决于切换-1）。点击按钮＆＃34;显示地图＆＃34;相反＆＃34;关闭地图＆＃34;显示＆＃34;显示照片＆＃34;或＆＃34;显示视频＆＃34;按钮

当＆＃34;内容4＆＃34;是活跃的，然后可以打开＆＃34;内容1＆＃34;或者＆＃34;内容2，点击＆＃34;显示照片＆＃34;或＆＃34;显示视频＆＃34;

导航结构可以自由更改。

＆＃13;

$(function() {
  $('.j-lst-toggle').each(function() {
    var $this = $(this);
    $this.on('click', 'button', function(e) {
      e.preventDefault();
      $this.children().toggleClass('active');
      if ($this.hasClass('j-media-toggle')) {
        $this.closest('.j-multimedia-cnt').find('.j-media').children().toggleClass('active');
      } else if ($this.hasClass('j-map-toggle')) {
        $this.closest('.j-multimedia-cnt').find('.j-multimedia').children().toggleClass('active');
      }
    });
  });
  
});

＆＃13;

.j-multimedia-cnt {
  border: 3px solid black;
}
.lst-c-actions {
  list-style: none;
}

.j-lst-toggle__btn {
  display: none;
}
.j-lst-toggle__btn.active {
  display: block;
}
.lst-c-actions__btn {
  display: none;
}
.lst-c-actions__btn.active {
  display: block;
}
.j-media__item {
  display: none;
}
.j-media__item.active {
  display: block;
}
.j-multimedia__item {
  display: none;
}
.j-multimedia__item.active {
  display: block;
}

.cols {
  display: flex;
}
.cols__item--left {
  width: 70%;
}
.cols__item--right {
  width: 30%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="j-multimedia-cnt">
  <nav>
    <ul class="lst-c-actions">
      <li class="lst-c-actions__item j-lst-toggle j-media-toggle">
        <button type="button" class="lst-c-actions__btn btn-icon j-lst-toggle__btn active"><span class="btn-icon__ico icon video">icon-video</span> <span class="btn-icon__text">Show video</span></button>
        <button type="button" class="lst-c-actions__btn btn-icon j-lst-toggle__btn"><span class="btn-icon__ico icon photo">icon-photo</span> <span class="btn-icon__text">Show photo</span></button>
      </li>
      <li class="lst-c-actions__item j-lst-toggle j-map-toggle">
        <button type="button" class="lst-c-actions__btn btn-icon j-lst-toggle__btn active"><span class="btn-icon__ico icon map">icon-map</span> <span class="btn-icon__text">Show on map</span></button>
        <button type="button" class="lst-c-actions__btn btn-icon j-lst-toggle__btn"><span class="btn-icon__ico icon map">icon-map</span> <span class="btn-icon__text">Close map</span></button>
      </li>
    </ul>
  </nav>
  
  <div class="j-multimedia">
    <div class="j-multimedia__item active">
      <div class="cols">
        <div class="cols__item cols__item--left">
          <div class="j-media">
            <div class="j-media__item active">
              <div style="background: red">Content 1</div>
            </div>
            <div class="j-media__item">
              <div style="background: green">Content 2</div>
            </div>
          </div>
        </div>
        <div class="cols__item cols__item--right">
          <div style="background: grey">Content 3</div>
        </div>
      </div>
    </div>
    <div class="j-multimedia__item">
      <div style="background: yellow">Content 4</div>
    </div>
  </div>
</div>

＆＃13;

＆＃34;

Answer 1

您想删除＆＃34;关闭地图＆＃34;按钮并对事件处理程序进行以下更改...首先更改按钮切换以仅隐藏当前按钮并显示所有其他按钮：

$this.children().addClass('active'); // Show all buttons
$this.siblings().children().addClass('active');
$(this).removeClass('active'); // Hide clicked button

然后根据按钮的索引显示特定媒体（您不会以与内容编号相同的顺序显示它们，因此显示1 - index元素：

if ($this.hasClass('j-media-toggle')) {
    var media = $this.closest('.j-multimedia-cnt').find('.j-media').children();
    media.eq(1 - $(this).index()).addClass('active');
    media.eq($(this).index()).removeClass('active');

最后切换显示媒体或地图。

    media.closest('.j-multimedia').children(':has(.j-media)').addClass('active')
        .siblings().removeClass('active');
} else if ($this.hasClass('j-map-toggle')) {
    $this.closest('.j-multimedia-cnt').find('.j-multimedia').children()
        .toggleClass('active');
}

请在此处查看完整，有效的示例：http://jsfiddle.net/v3Ld8u7L/1/

JQuery switch语句（隐藏/显示逻辑）

1 个答案: