如何在Jquery中激活一个链接时禁用所有链接

Question

我有三个隐藏内容的链接。当我点击一个链接时，隐藏的内容将当前页面推到一边以显示重合的内容。当前代码的问题是，我点击并显示链接仍处于活动状态的类似内容，如果我点击它，它会继续向左移动并最终消失。我需要做的是在显示隐藏内容时禁用所有链接，并在再次隐藏内容时再次启用。我仍然是学习Javascript和Jquery编码的新手。我很感激帮助

jQuery(document).ready(function($){

$('#cd-team').find('a.team-mem').on('click', function(event){
    event.preventDefault();
    //variable stores which member data needs to be clicked
    var selected_member = $(this).data('type');

    $('.cd-member-bio.'+selected_member+'').animate({
        left:'0px'
    }, 200);

    $('body').animate({
        'marginLeft': '+=300px'
    }, 200);

   // $( "a.team-mem" ).unbind('click');

     $('.icon-close').click(function() {
          $('.cd-member-bio').animate({
            left: "-300px"
          }, 200);
          $('body').animate({
          'marginLeft': '0'
        }, 200);
      });

});

}）;

http://jsfiddle.net/diviseed/p3g16Lwq/

P.S：如果有人能为上述代码提出更好的解决方案，我将不胜感激...... :)

Answer 1

刚刚改变了你的小提琴：http://jsfiddle.net/p3g16Lwq/1/

如果已显示成员框，则添加一个bool来检查。

var shownMember = false;

左边距动画仅在不是这种情况下开始（并将bool更改为true）：

if (!shownMember) {
        $('body').animate({
            'marginLeft': '+=300px'
        }, 200, function () {
            shownMember = true;
        });
    }

关闭时，它会重置为false：

$('.icon-close').click(function () {
        $('.cd-member-bio').animate({
            left: "-300px"
        }, 200);
        $('body').animate({
            'marginLeft': '0'
        }, 200);
        shownMember = false;
    });

对于这个问题有更好的解决方案，但它会......

Answer 2

您可以通过两种方式解决此问题。

在打开单击面板之前关闭所有打开的面板。您只需将$('.icon-close').click()放在顶部即可。 或

定义一个可以跟踪面板是否打开的变量。见下面的演示

jQuery(document).ready(function($){
    var open = false;
    $('#cd-team').find('a.team-mem').on('click', function(event){
        event.preventDefault();
        if( !open ) {
            open = true;
            //variable stores which member data needs to be clicked
            var selected_member = $(this).data('type');

            $('.cd-member-bio.'+selected_member+'').animate({
                left:'0px'
            }, 200);

            $('body').animate({
                'marginLeft': '+=300px'
            }, 200);

            // $( "a.team-mem" ).unbind('click');

            $('.icon-close').click(function() {
                open = false;
                $('.cd-member-bio').animate({
                    left: "-300px"
                }, 200);
                $('body').animate({
                    'marginLeft': '0'
                }, 200);
            });
        }
    });
});

DEMO

Answer 3

一种解决方案是添加一个用于显示隐藏内容的类，并使用CSS transition属性来提供动画。

此外，您无需将点击功能处理程序绑定到＆＃39; icon-close＆＃39;每次点击链接。所以，它可以移到外面。

最后一件事情不是将margin-left:0px提供给正文，而是可以使用-=300px，因为不同的浏览器可能会为不为0的正文设置初始边距。

JSFiddle：http://jsfiddle.net/p3g16Lwq/11/

＆＃13;

＆＃13;

jQuery(document).ready(function($) {

  $('#cd-team').find('a.team-mem').on('click', function(event) {
    event.preventDefault();

    // If any of 'cd-memeber-bio' element is revealed, just return from function
    if ($('.cd-member-bio.revealed').length)
      return;

    //variable stores which member data needs to be clicked
    var selected_member = $(this).data('type');

    $('.cd-member-bio.' + selected_member + '').addClass('revealed');

    $('body').animate({
      'marginLeft': '+=300px'
    }, 200);

  });

  $('.icon-close').click(function() {
    $('.cd-member-bio').removeClass('revealed');
    $('body').animate({
      'marginLeft': '-=300px'
    }, 200);
  });
});

＆＃13;

body {
  font-family: 'Roboto', sans-serif;
  color: #333333;
  background-color: #FFFFFF;
  /* prevent ie from showing the horizontal scrollbar */
  overflow-x: hidden;
}
.cd-member-bio {
  top: 0;
  left: -300px;
  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
  line-height: 24px;
  background-color: #009999;
  padding-left: 10px;
  color: #fff;
  -webkit-transition: left 0.2s;
  transition: left 0.2s;
}
.revealed {
  left: 0px;
}
table {
  background-color: #fff;
  text-align: center;
  color: #333;
  width: 90%;
}
table th {
  font-size: 1.0em;
  font-weight: bold;
  background-color: #ccc;
  padding: 5px;
}
table td {
  font-size: 1.0em;
  padding: 5px;
}
.team-mem {
  color: #009999;
  font-size: 1.5em;
  line-height: 24px;
}
.team-mem img {
  border-radius: 50%;
}
@media only screen and (min-width: 600px) {
  .portfolio-item {
    height: 340px;
    text-align: center;
  }
}
@media only screen and (min-width: 768px) {
  .portfolio-item {
    height: 380px;
    text-align: center;
    border-radius: 50%;
  }
}
@media only screen and (min-width: 1200px) {
  .portfolio-item {
    height: 400px;
    text-align: center;
    border-radius: 50%;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Page Content -->
<section id="cd-team" class="cd-section container">

  <!-- Page Heading -->
  <div class="row">
    <div class="col-sm-12">
      <h1 class="page-header text-left"><small style="color:#000; font-weight:bold;">Test content</small>
                </h1>
    </div>
  </div>
  <!-- /.row -->

  <!-- Projects Row -->
  <div class="row">
    <div class="col-xs-4 portfolio-item" data-filter="one">
      <a href="#0" class="team-mem" data-type="member-1">
        <img class="img-responsive" src="http://placehold.it/250x250" alt="">
        <p class="mem-name">Member 1</p>
      </a>
    </div>
    <div class="col-xs-4 portfolio-item" data-filter="one">
      <a href="#0" class="team-mem" data-type="member-2">
        <img class="img-responsive" src="http://placehold.it/250x250" alt="">
        <p class="mem-name">Member 2</p>
      </a>
    </div>
    <div class="col-xs-4 portfolio-item" data-filter="two">
      <a href="#0" class="team-mem" data-type="member-3">
        <img class="img-responsive" src="http://placehold.it/250x250" alt="">
        <p class="mem-name">Member 3</p>
      </a>
    </div>

  </div>
  <!-- /.row -->
</section>
<div class="cd-member-bio member-1">
  <div class="icon-close" `style="z-index:100000;">
    close
  </div>
  <div class="cd-bio-content">
    <h1>Member 1 </h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
  <!-- cd-bio-content -->
</div>
<!-- cd-member-bio -->

<div class="cd-member-bio member-2">
  <div class="icon-close" `style="z-index:100000;">
    close
  </div>
  <div class="cd-bio-content">
    <h1>Member 2</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
  <!-- cd-bio-content -->
</div>
<!-- cd-member-bio -->

<div class="cd-member-bio member-3">
  <div class="icon-close" `style="z-index:100000;">
    close
  </div>
  <div class="cd-bio-content">
    <h1>Member 3</h1>
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
      Mauris placerat eleifend leo.</p>
  </div>
  <!-- cd-bio-content -->
</div>
<!-- cd-member-bio -->

＆＃13;

＆＃13;

＆＃13;