Форум

r1pt1d3 · #1 (**permalink**) 04.11.2016, 17:36

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

HTML-код:

<div id="faq_info_holder">
    <div class="faq_collumn">
        <a class="faq_info">
            <div>
                <p class="faq_name">Tempor incididunt
			<i class="material-icons-add_circle"></i>
	       </p>
               <span class="hiden_faq">
               ....
               </span>
            </div>
        </a>
    </div>
</div>

Код:

.faq_collumn{
		height: 522px;
		width: 350px;
		float: left;
		margin-left: 40px;
	}
	.faq_info{
		width: 350px;
		height: auto;
		min-height: 65px;
		max-height: 350px;
		border-radius: 4px;
		box-shadow: 0 0 10px rgba(0,0,0,0.6);
		background-color: #FF4538;
		float: left;
		margin-bottom: 40px;
		cursor: pointer;
	}
	#faq_info_holder{
		width: 1200px;
		margin: auto;
	}
	.faq_name{
		font: 22px georgia;
		color: white;
		margin: 0;
		margin-left: 25px;
		margin-top: 20px;
	}
	.material-icons-add_circle{
		float: right;
		color: white;
		font-size: 32px;
		margin-right: 15px;
		margin-top: -4px;
	}
	.material-icons-remove_circle{
		float: right;
		color: white;
		font-size: 32px;
		margin-right: 15px;
		margin-top: -4px;
	}
	.hiden_faq{
		font: 16px georgia;
		color: white;
		float: left;
		margin-left: 25px;
		margin-right: 55px;
		margin-bottom: 20px;
		display: none;
	}
	.active{
		background: #DD3C30;
	}

И непосредственно Jquery:

$(".faq_info").click(function(){

		$(this).toggleClass("active").find(".hiden_faq").slideToggle("normal");

		if ($(".faq_info").hasClass("active")){
			$(".faq_info").not(this).removeClass("active").find(".hiden_faq").slideUp("normal");

			$(".faq_info").find(".material-icons-remove_circle").addClass("material-icons-add_circle").removeClass("material-icons-remove_circle");
		}

		$(this).find(".material-icons-add_circle").addClass("material-icons-remove_circle").removeClass("material-icons-add_circle");


	});

P.S. док.реди прописан офк.

рони · #2 (**permalink**) 04.11.2016, 20:29

r1pt1d3,
количество классов избыточно ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .faq_collumn{
		height: 522px;
		width: 350px;
		float: left;
		margin-left: 40px;
	}
	.faq_info{
		width: 350px;
		height: auto;
		min-height: 65px;
		max-height: 350px;
		border-radius: 4px;
		box-shadow: 0 0 10px rgba(0,0,0,0.6);
		background-color: #FF4538;
		float: left;
		margin-bottom: 40px;
		cursor: pointer;
	}
	#faq_info_holder{
		width: 1200px;
		margin: auto;
	}
	.faq_name{
		font: 22px georgia;
		color: white;
		margin: 0;
		margin-left: 25px;
		margin-top: 20px;
	}
	.material-icons-add_circle{
		float: right;
		color: white;
		font-size: 32px;
		margin-right: 15px;
		margin-top: -4px;
	}
    .material-icons-add_circle:after{
      content: "+";
    }

	.material-icons-remove_circle{
		float: right;
		color: white;
		font-size: 32px;
		margin-right: 15px;
		margin-top: -4px;
	}
    .material-icons-remove_circle:after{
      content: "-";
    }

	.hiden_faq{
		font: 16px georgia;
		color: white;
		float: left;
		margin-left: 25px;
		margin-right: 55px;
		margin-bottom: 20px;
		display: none;
	}
	.active{
		background: #DD3C30;
	}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(function() {
    $(".faq_info").click(function() {
        $(this).toggleClass("active").find(".hiden_faq").slideToggle("normal");
        $(".faq_info").not(this).removeClass("active").find(".hiden_faq").slideUp("normal");
        $(".faq_info").not(this).find(".material-icons-remove_circle").addClass("material-icons-add_circle").removeClass("material-icons-remove_circle");
        if ($(this).hasClass("active")) $(this).find(".material-icons-add_circle").addClass("material-icons-remove_circle").removeClass("material-icons-add_circle");
        else $(this).find(".material-icons-remove_circle").addClass("material-icons-add_circle").removeClass("material-icons-remove_circle")
    })
});
  </script>
</head>

<body>
<div id="faq_info_holder">
    <div class="faq_collumn">
        <a class="faq_info">
            <div>
                <p class="faq_name">Tempor incididunt
      <i class="material-icons-add_circle"></i>
         </p>
               <span class="hiden_faq">
               ....
               </span>
            </div>
        </a>
    </div>
</div>
<div id="faq_info_holder">
    <div class="faq_collumn">
        <a class="faq_info">
            <div>
                <p class="faq_name">Tempor incididunt
      <i class="material-icons-add_circle"></i>
         </p>
               <span class="hiden_faq">
               ....
               </span>
            </div>
        </a>
    </div>
</div>

</body>
</html>

рони · #3 (**permalink**) 04.11.2016, 20:38

r1pt1d3,
смена иконки без дополнительного класса

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .faq_collumn{
		height: 522px;
		width: 350px;
		float: left;
		margin-left: 40px;
	}
	.faq_info{
		width: 350px;
		height: auto;
		min-height: 65px;
		max-height: 350px;
		border-radius: 4px;
		box-shadow: 0 0 10px rgba(0,0,0,0.6);
		background-color: #FF4538;
		float: left;
		margin-bottom: 40px;
		cursor: pointer;
	}
	#faq_info_holder{
		width: 1200px;
		margin: auto;
	}
	.faq_name{
		font: 22px georgia;
		color: white;
		margin: 0;
		margin-left: 25px;
		margin-top: 20px;
	}
	.material-icons-add_circle{
		float: right;
		color: white;
		font-size: 32px;
		margin-right: 15px;
		margin-top: -4px;
	}
    .material-icons-add_circle:after{
      content: "+";
    }


   .active .material-icons-add_circle:after{
      content: "-";
    }

	.hiden_faq{
		font: 16px georgia;
		color: white;
		float: left;
		margin-left: 25px;
		margin-right: 55px;
		margin-bottom: 20px;
		display: none;
	}
	.active{
		background: #DD3C30;
	}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(function() {
    var info = $(".faq_info");
    info.on("click",function() {
        $(this).toggleClass("active").find(".hiden_faq").slideToggle("normal");
        info.not(this).removeClass("active").find(".hiden_faq").slideUp("normal");
    })
});
  </script>
</head>

<body>
<div id="faq_info_holder">
    <div class="faq_collumn">
        <a class="faq_info">
            <div>
                <p class="faq_name">Tempor incididunt
      <i class="material-icons-add_circle"></i>
         </p>
               <span class="hiden_faq">
               ....
               </span>
            </div>
        </a>
    </div>
</div>
<div id="faq_info_holder">
    <div class="faq_collumn">
        <a class="faq_info">
            <div>
                <p class="faq_name">Tempor incididunt
      <i class="material-icons-add_circle"></i>
         </p>
               <span class="hiden_faq">
               ....
               </span>
            </div>
        </a>
    </div>
</div>

</body>
</html>

r1pt1d3 · #4 (**permalink**) 04.11.2016, 20:56

Спасибо, использовал первый вариант.

"Количество классов избыточно", лучше использовать id там где классы не требуются? В чем преимущество?

рони · #5 (**permalink**) 04.11.2016, 21:24

Сообщение от r1pt1d3

лучше использовать id там где классы не требуются

чаще наоборот id не требуется

Сообщение от r1pt1d3

В чем преимущество?

2 строки скрипта без проблем с названими классов или 5 с вырви глаз

Форум

Справочник

Discord чат

Курсы javascript