Как сделать переключение между несколькими вариантами с помощью jQuery

Question

Я сделал небольшой дизайн с кругами, которые расширяются при нажатии на них. У меня несколько кругов, и я хочу, чтобы можно было щелкать и расширять один круг за раз, а затем другой круг закрывается.

Вот кодовый пример моего примера: https://www.codeply.com/p/7QdDsEF9ul

А вот фрагмент jQuery:

$('.product1').click(function () {
$('#product1').toggleClass('expand');
$('.hidden#1').toggleClass('show');

$('.hidden#2').removeClass('show');
$('#product2').removeClass('expand');
});

$('.product2').click(function () {
$('#product2').toggleClass('expand');
$('.hidden#2').toggleClass('show');
});

Как вы можете видеть, это не будет очень эффективным, особенно если я добавлю больше кругов. Есть ли более простой способ сделать это?

Answer 1

Поскольку div, который нужно показать, является потомком .circle, класс которого изменился, когда он показан, вы можете избежать необходимости возиться с дочерним элементом div, используя вместо этого CSS rule .expand div , Таким образом, изменений в родительском элементе с .expand будет достаточно.

Дайте всем общий класс <a> sa, может быть, product, и при щелчке проверьте, не является ли его дочерний (* 1009). *) имеет класс expand или нет. Если это так, удалите .expand из всех элементов - в противном случае удалите expand из всех элементов , но затем добавьте его к дочернему элементу .circle:

$('.product').click(function() {
  const $circle = $(this).children();
  if ($circle.hasClass('expand')) {
    $('.expand').removeClass('expand');
  } else {
    $('.expand').removeClass('expand');
    $circle.addClass('expand');
  }
});

a {
  font-size: 2.25em;
}

.active {
  color: #6bd627;
}

.circle {
  width: 150px;
  height: 150px;
  background-color: #00aae8;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  transition: all 0.3s ease-in-out;
  position: absolute;
}

.circle h2 {
  color: #fff;
  font-size: 0.7em;
  margin-bottom: auto;
  margin-top: 55px;
}

.expand {
  height: 248px !important;
  background-color: #6bd627 !important;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
  transition: all 0.3s ease-in-out;
  position: absolute;
}

.hidden {
  display: none;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.expand div {
  display: block !important;
  position: absolute;
  opacity: 1;
  transition: all 0.3s ease-in-out;
}

.link {
  font-size: 0.5em;
  color: #000;
}

ul,
ol {
  margin: 0;
}

li {
  margin-bottom: -0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid s1">
  <div class="container py-5">
    <div class="row py-5 align-items-end">

      <div class="col-sm text-center">
        <img src="https://placehold.it/300x300" class="pb-3 img-fluid" />
        <a href="javascript:void(0)" class="d-flex justify-content-center mt-0 product">
          <div class="circle">
            <h2>Title 1</h2>
            <div class="hidden"><br>
              <ul class="list-unstyled">
                <li class="list-item"><span class="link">Top Picks</span></li>
                <li class="list-item"><span class="link">By Brand</span></li>
                <li class="list-item"><span class="link">By Price</span></li>
              </ul>
            </div>
          </div>
        </a>
      </div>

      <div class="col-sm text-center">
        <img src="https://placehold.it/300x300" class="pb-3 img-fluid" />
        <a href="javascript:void(0)" class="d-flex justify-content-center mt-0 product">
          <div class="circle">
            <h2>Title 1</h2>
            <div class="hidden" id="2"><br>
              <ul class="list-unstyled">
                <li class="list-item"><span class="link">Top Picks</span></li>
                <li class="list-item"><span class="link">By Brand</span></li>
                <li class="list-item"><span class="link">By Price</span></li>
              </ul>
            </div>
          </div>
        </a>
      </div>

      <div class="col-sm text-center">
        <img src="https://placehold.it/300x300" class="pb-3 img-fluid" />
        <a href="javascript:void(0)" class="d-flex justify-content-center mt-0 product">
          <div class="circle">
            <h2>Title 1</h2>
            <div class="hidden"><br>
              <ul class="list-unstyled">
                <li class="list-item"><span class="link">Top Picks</span></li>
                <li class="list-item"><span class="link">By Brand</span></li>
                <li class="list-item"><span class="link">By Price</span></li>
              </ul>
            </div>
          </div>
        </a>
      </div>

    </div>
  </div>
</div>

Вам не нужны идентификаторы или числовые c -индексированные классы.

Answer 2

Избавьтесь от id и просто используйте класс .product, затем выполните перебор всех

$('.product').each(function(i,v){
    console.log({i:i,v:v,'$(this)':$(this)});
    $(this).on('click',function(){
        $(this).toggleClass('expand');
        $(this).find('.hidden').toggleClass('show');
    })
});

В вашем текущем html, как вы сказали, DOM продукта выглядит так:

  <div class="col-sm text-center">
    <img src="https://placehold.it/300x300" class="pb-3 img-fluid" />
    <a href="javascript:void(0)" class="d-flex justify-content-center mt-0 product2">
      <div class="circle" id="product1">
        <h2>Title 1</h2>
        <div class="hidden" id="2"><br>
          <ul class="list-unstyled">
            <li class="list-item"><span class="link">Top Picks</span></li>
            <li class="list-item"><span class="link">By Brand</span></li>
            <li class="list-item"><span class="link">By Price</span></li>
          </ul>
        </div>
      </div>
    </a>
  </div>

Изменяя только эту строку:

      <div class="circle" id="product1">

на:

      <div class="circle product">

, вы можете перебирать все и переключать классы для себя и своего потомка '.hidden'

Ключевое слово $(this) имеет особое значение внутри функций обратного вызова, таких как .each(), однако я также оставил в function(i,v), что означает function(index,value), так что вы даже можете использовать их, как я показал через консоль.

Отображение только одного круга товаров за раз

Я оставил все как простой toggleClass(), которым вы поделились выше, хотя, если вы хотите быть более явным, вы можете используйте проверки hasClass(), а также можете иметь только один видимый круг товаров, добавив его в первую строку обработчика кликов:

$('.product.expand').removeClass('expand').find('.hidden').removeClass('show');

Рабочий фрагмент / скрипка

Codeply нуждается в вас, чтобы создать учетную запись и не включает в себя код внутри сообщения на случай, если сервис выйдет из строя в будущем, поэтому я переместил это в фрагмент стека переполнения так что вы можете увидеть рабочий код.

$('.product').each(function(i,v){
        // console.log({i:i,v:v,'$(this)':$(this)});
        $(this).on('click',function(){ 
            // $('.product.expand').removeClass('expand').find('.hidden').removeClass('show');
            $(this).toggleClass('expand');
            $(this).find('.hidden').toggleClass('show');
        })
    });

    // $('.product1').click(function() {
    //   $(this).nextAll('.hidden:first').toggleClass('show');
    // });

a {
	 font-size: 2.25em;
}
 .active {
	 color: #6bd627;
}
 .circle {
	 width: 150px;
	 height: 150px;
	 background-color: #00aae8;
	 border-radius: 50%;
	 justify-content: center;
	 align-items: center;
	 display: flex;
	 transition: all 0.3s ease-in-out;
	 position: absolute;
}
 .circle h2 {
	 color: #fff;
	 font-size: 0.7em;
	 margin-bottom: auto;
	 margin-top: 55px;
}
 .expand {
	 height: 248px !important;
	 background-color: #6bd627 !important;
	 border-top-left-radius: 50%;
	 border-top-right-radius: 50%;
	 border-bottom-left-radius: 0%;
	 border-bottom-right-radius: 0%;
	 transition: all 0.3s ease-in-out;
	 position: absolute;
}
 .hidden {
	 display: none;
	 opacity: 0;
	 transition: all 0.3s ease-in-out;
}
 .show {
	 display: block !important;
	 position: absolute;
	 opacity: 1;
	 transition: all 0.3s ease-in-out;
}
 .link {
	 font-size: 0.5em;
	 color: #000;
}
 ul, ol {
	 margin: 0;
}
 li {
	 margin-bottom: -0.5em;
}
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid s1" style="margin-bottom:400px;">
    <div class="container py-5">
    <div class="row py-5 align-items-end">
        
      <div class="col-sm text-center">
        <img src="https://placehold.it/300x300" class="pb-3 img-fluid" />
        <a href="javascript:void(0)" class="d-flex justify-content-center mt-0 product1">
          <div class="circle product">
            <h2>Title 1</h2>
            <div class="hidden" id="1"><br>
              <ul class="list-unstyled">
                <li class="list-item"><span class="link">Top Picks</span></li>
          		<li class="list-item"><span class="link">By Brand</span></li>
        		<li class="list-item"><span class="link">By Price</span></li>
              </ul>
            </div>
          </div>
        </a>
      </div>
      
      <div class="col-sm text-center">
        <img src="https://placehold.it/300x300" class="pb-3 img-fluid" />
        <a href="javascript:void(0)" class="d-flex justify-content-center mt-0 product2">
          <div class="circle product">
            <h2>Title 1</h2>
            <div class="hidden" id="2"><br>
              <ul class="list-unstyled">
                <li class="list-item"><span class="link">Top Picks</span></li>
          		<li class="list-item"><span class="link">By Brand</span></li>
        		<li class="list-item"><span class="link">By Price</span></li>
              </ul>
            </div>
          </div>
        </a>
      </div>
      
      <div class="col-sm text-center">
        <img src="https://placehold.it/300x300" class="pb-3 img-fluid" />
        <a href="javascript:void(0)" class="d-flex justify-content-center mt-0 product1">
          <div class="circle product">
            <h2>Title 1</h2>
            <div class="hidden"><br>
              <ul class="list-unstyled">
                <li class="list-item"><span class="link">Top Picks</span></li>
          		<li class="list-item"><span class="link">By Brand</span></li>
        		<li class="list-item"><span class="link">By Price</span></li>
              </ul>
            </div>
          </div>
        </a>
      </div>

    </div>
    </div>
  </div>