Javascript 保持可扩展列表打开

Question

我正在编写一个网站，目前有 3 个列表项可以在点击时展开和缩小。第三个列表项包含一个联系表单，我希望它在单击表单字段时不会缩小，但如果单击列表项的任何其他部分，它仍然会缩小。这可能吗？这是我目前使用的HTML和Javascript

<ul class="tiles">
  <li class="tiles__tile" data-tile="1">
    <h2>About</h2>
  </li>
  <li class="tiles__tile" data-tile="2">
    <h2>Work</h2>
  </li>
  <li class="tiles__tile" data-tile="3">
    <h2>Contact</h2>
  </li>
</ul>
<li class="content__item" id="3">
    <div class="content-wrap">
      <h2> GET IN TOUCH </h2>
    <form class="form" id="form1" method="post" action="" method="post"/>
      <p class="name">
        <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name"/>
      </p>

      <p class="email">
        <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email"/>
      </p>

      <p class="text">
        <textarea name="comment" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
      </p>


      <div class="submit">
        <input type="submit" value="SEND" id="button-blue" href=""/>
        <div class="ease"></div>
      </div>
</div>
    </div>
  </li>
</ul>
</form>



    <li class="content__item" id="3">
    <div class="content-wrap">
      <h2> GET IN TOUCH </h2>
    <form class="form" id="form1" method="post" action="" method="post"/>
      <p class="name">
        <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name"/>
      </p>

      <p class="email">
        <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email"/>
      </p>

      <p class="text">
        <textarea name="comment" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
      </p>


      <div class="submit">
        <input type="submit" value="SEND" id="button-blue" href="dillonpropp.com"/>
        <div class="ease"></div>
      </div>
</div>
    </div>
  </li>
</ul>
</form>



 var tileBtn = $('li.tiles__tile');
var allContent = $('li.content__item');
var contentWrap = $('.content-wrap');

tileBtn.on('click touchstart', function() {
  var self = $(this);
  var match = self.attr('data-tile');
  var allContent = $('li.content__item');
  var content = $('li#' + match);

  self.toggleClass('active');

  content.toggleClass('active');

 contentWrap.css({'transition-delay': '.35s'});

  return false;
});

$(window).on('click touchstart', function() {
  if (allContent.hasClass('active') && tileBtn.hasClass('active')) {
    allContent.removeClass('active');
    setTimeout(function() {
      tileBtn.removeClass('active');
    }, 400);
    contentWrap.css({'transition-delay': '.0s'});

  }
})

Answer 1

问题是附加到 window 对象的处理程序。

var tileBtn = $('li.tiles__tile');
var allContent = $('li.content__item');
var contentWrap = $('.content-wrap');

tileBtn.on('click touchstart', function() {
  var self = $(this);
  var match = self.attr('data-tile');
  var allContent = $('li.content__item');
  var content = $('li#' + match);

  self.toggleClass('active');

  content.toggleClass('active');

  contentWrap.css({
    'transition-delay': '.35s'
  });

  return false;
});

$(window).on('click touchstart', function(e) {
  if (allContent.hasClass('active') && tileBtn.hasClass('active') && !$(e.target).is('.content__item :input')) {
    allContent.removeClass('active');
    setTimeout(function() {
      tileBtn.removeClass('active');
    }, 400);
    contentWrap.css({
      'transition-delay': '.0s'
    });

  }
})

.content__item {
  display: none;
}
.content__item.active {
  display: list-item;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="tiles">
  <li class="tiles__tile" data-tile="1">
    <h2>About</h2>
  </li>
  <li class="tiles__tile" data-tile="2">
    <h2>Work</h2>
  </li>
  <li class="tiles__tile" data-tile="3">
    <h2>Contact</h2>
  </li>
</ul>
<ul>
  <li class="content__item" id="1">1</li>
  <li class="content__item" id="2">2</li>
  <li class="content__item" id="3">
    <div class="content-wrap">
      <h2> GET IN TOUCH </h2>

      <form class="form" id="form1" method="post" action="" method="post">
        <p class="name">
          <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Name" id="name" />
        </p>
        <p class="email">
          <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Email" />
        </p>
        <p class="text">
          <textarea name="comment" class="validate[required,length[6,300]] feedback-input" id="comment" placeholder="Comment"></textarea>
        </p>
        <div class="submit">
          <input type="submit" value="SEND" id="button-blue" href="dillonpropp.com" />
          <div class="ease"></div>
        </div>
      </form>
    </div>
  </li>
</ul>

Javascript 保持可扩展列表打开

Javascript to keep expandable list open

javascript

html

onclick

expand

tile