Question

我尝试逐步创建订单，并且我使用 data-id =＆＃34; x＆＃34; 来告诉哪些内容可见什么时候被选中。

我想要完成的是，如果 data-id 具有相同的目标，则切换不会执行功能，但只需选择单击其他div。

有什么想法吗？

这是我的代码：

$('li').on('click',function(e) {
  e.preventDefault();
  // remove selected class from links after the current one
  $(this).closest('section').nextAll('section').find('li').removeClass('selected');
  // remove selected from siblings, toggle current selected class
  $(this).siblings('li').removeClass('selected').end().toggleClass('selected');
  var $target = $('#'+$(this).attr('data-id'));
  if ($target.length) {
    // hide any steps after the current one that may be shown
    $(this).closest('section').nextAll('section').find('.step').not($target).removeClass('active');
    // toggle display of selected step
    $target.toggleClass('active'); 
  } else {
    console.log('do something else to end this thing');
  }
})

This是我的JSFiddle包含示例和上面的代码。

我可以通过我已经拥有的代码以及一个小小的解释来获得代码的外观示例吗？谢谢。

Answer 1

您可以将pointer-events: none;用于.selected类

$('li').on('click',function(e) {
  
	if($(this).hasClass('selected')){
		return false;
	} else {
		e.preventDefault();
		// remove selected class from links after the current one
		$(this).closest('section').nextAll('section').find('li').removeClass('selected');
		// remove selected from siblings, toggle current selected class
		$(this).siblings('li').removeClass('selected').end().addClass('selected');
		var $target = $('#'+$(this).attr('data-id'));
		if ($target.length) {
			// hide any steps after the current one that may be shown
			$(this).closest('section').nextAll('section').find('.step').not($target).removeClass('active');
			// toggle display of selected step
			$target.addClass('active'); 
		} else {
			console.log('do something else to end this thing');
		}
	}
})

h1 {
  font-size: 20px;
}
.step {
  display: none;
}
.active {
  display: block;
}
.selected {
  background: #27ae60 !important;
  color: #fff !important;
}
ul {
  padding:0;
}
li {
  list-style: none;
}
.bananas {
  padding: 20px;
  color: #7f8c8d;
  background: #ecf0f1;
  display: inline-block;
  border-radius: 10px;
  cursor: pointer;
  width: 25%;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
.hi {
  color: #e74c3c;
  border-bottom: 2px dotted #e74c3c;
}
h1 {
  margin-top: 30px;
  margin-bottom: 30px;
}

#same_target {
  margin-top: 30px;
  background: #9b59b6;
  padding: 20px;
  color: #fff;
}

#same_target p {
  margin-bottom:0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


<div class="container">
  <section>
    <h1>First step, please choose something</h1>
    <ul>
        <li class="bananas" data-id="one">
          Sprite
        </li>
        <li class="bananas" data-id="two">
          King Kong
        </li>
        <li class="bananas" data-id="three">
          Astronauts
        </li>
      </ul>
  </section>

  <section>
    <div id="one" class="step">
    <h1>Second step for <span class="hi">Sprite</span> - choose another</h1>
      <ul>
        <li class="bananas" data-id="same_target">
          McDonalds
        </li>
        <li class="bananas" data-id="same_target">
          Burger King
        </li>
        <li class="bananas" data-id="same_target">
          Tim Hortons
        </li>
      </ul>
    </div>

    <div id="two" class="step">
      <h1>Second step for <span class="hi">King Kong</span> - choose another</h1>
      <ul>
        <li class="bananas" data-id="same_target">
          McDonalds
        </li>
        <li class="bananas" data-id="same_target">
          Burger King
        </li>
        <li class="bananas" data-id="same_target">
          Tim Hortons
        </li>
      </ul>
    </div>

    <div id="three" class="step">
      <h1>Second step for <span class="hi">Astronauts</span> - choose another</h1>
      <ul>
        <li class="bananas" data-id="same_target">
          McDonalds
        </li>
        <li class="bananas" data-id="same_target">
          Burger King
        </li>
        <li class="bananas" data-id="same_target">
          Tim Hortons
        </li>
      </ul>
    </div>
  </section>

  <section>
    <div id="same_target" class="step">
      <p class="fml">
        Now select another brand and watch this content toggle, even when the target is the same.
      </p>
    </div>
  </section>
</div>

当目标相同时，我不想要切换功能

1 个答案: