按钮单击 - 显示内容,隐藏以前的可见内容

时间:2016-03-26 19:42:29

标签: javascript jquery

我打算按下按钮点击/显示内容的以下功能:

1.按钮点击切换内容块, - WORKS

2.按钮双击 - 隐藏当前内容块(切换) - 工作

3.当其中一个处于活动状态时,单击其他按钮 - 隐藏活动的按钮并显示一个用户点击。不会隐藏以前的内容 - 需要帮助:(

  1. 如果在侧面内容块外部点击,则隐藏所有内容 - 工作
  2. 请指点我的方向。非常感谢。

    
    
      $(".left-quicklinks li").click(function() {
        var LinkButton = $(this).attr("data-button"), //buttons to switch between boxes
          LinkContent = "div[data-content=" + LinkButton + "]"; //content boxes "data-button" and "data-content" holds the same value
    
    
        $(LinkContent).fadeToggle(200);
    
        //console.log(LinkButton);
        //console.log(LinkContent);
    
      });
    
      //Close elements when clicking anywhere on the page
      $(document).mouseup(function(e) {
        var container = $('.left-quicklinks');
        if (!container.is(e.target) && container.has(e.target).length === 0) {
          $('.side-content div').fadeOut(200);
    
        };
      });
    
      /* Process : 
    
    1.button click- toggle content block, - WORKS
    2.button double click- hide current content block (toggle) - WORKS
    3.click on different button when one is active - hide active one and reveal the one user clicks. - NEED HELP :(
    4. hide all content if clicked outside side-content block - WORKS
      */
    
    .left-quicklinks {
      background: #3F4018;
      margin: 0;
      padding: 0;
      text-align: center;
    }
    .left-quicklinks li {
      width: 150px;
      height: 150px;
      display: inline-block;
      list-style-type: none;
      line-height: 150px;
      text-align: center;
      background: #7E7F31;
      color: #fff;
      cursor: pointer;
      font-size: 18px;
    }
    .left-quicklinks li:hover {
      background: #ccc;
      color: #333;
    }
    /* Content Block*/
    
    .side-content {
      width: 100%;
      height: 200px;
      background: #7F7F57;
      position: relative;
    }
    .side-content div {
      height: 200px;
      width: 200px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      background: #CACC4E;
      display: none;
      /* Hide now and revel with jquery */
    }
    .side-content div h1 {
      padding-top: 50px;
      color: #333;
      text-align: center;
    }
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Buttons -->
    <ul class="left-quicklinks">
      <li class="i-notices" data-button="notices">Notices</li>
      <li class="i-calendar" data-button="events">Our Events</li>
      <li class="i-twitter" data-button="feed">Feeds</li>
      <li class="i-link" data-button="links">Links</li>
      <li class="i-awards" data-button="about">About Us</li>
    </ul>
    
    <!-- Content -->
    <section class="side-content">
      <div data-content="notices">
        <h1>Notices Content</h1>
    
      </div>
      <div data-content="events">
        <h1>Events Content</h1>
      </div>
      <div data-content="feed">
        <h1>Feed Content</h1>
      </div>
      <div data-content="links">
        <h1>Links Content</h1>
      </div>
      <div data-content="about">
        <h1>About Us Content</h1>
      </div>
    </section>
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:2)

<强> jsBin demo

$(".left-quicklinks li").click(function() {
  var LinkButton = $(this).attr("data-button"),
      LinkContent = $("div[data-content=" + LinkButton + "]");

  $("div[data-content]").not(LinkContent).fadeOut();
  LinkContent.fadeToggle(200);
});
豫ICP备18024241号-1