slideToggle Div и Rotate Icon, если они видны или скрыты

Question

Если вы нажмете на div, я хочу, чтобы целевая «панель» имела значение slideToggle(). Если целевая панель скрыта, я хочу добавить класс в глификон, который будет вращать его на 270 градусов.

У меня все работает, за исключением проверки на наличие видимых сбоев. Что я делаю не так?

$(document).delegate(".showhide", "click", function(e) { 
 
    var panel = $(this).attr('panel'); 
 
    $("#" + panel).slideToggle(); 
 
    var icon = $(this).attr('icon'); 
 

 
    if ($("#" + panel).is(":visible")) { 
 
    $("#" + icon).removeClass('gly-rotate-270'); 
 
    } else { 
 
    $("#" + icon).addClass('gly-rotate-270'); 
 
    } 
 
});

.gly-rotate-270 { 
 
    filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1); 
 
    -webkit-transform: rotate(270deg); 
 
    -moz-transform: rotate(270deg); 
 
    -ms-transform: rotate(270deg); 
 
    -o-transform: rotate(270deg); 
 
    transform: rotate(270deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="showhide" panel="panelskills" icon="skillsicon"> 
 
    <span class="glyphicon glyphicon-circle-arrow-down" id="skillsicon"></span> Skill Level 
 
</div> 
 

 
<div id="panelskills"> 
 
    Some content in here... 
 
</div>

Here's the fiddle

Спасибо за вашу помощь.

Answer 1

UPDATE

• стрижка вниз HTML

• Для вращения иконки использования toggleClass('glyphicon-circle-arrow-down glyphicon-circle-arrow-right');

• Изменение panel и icon к data-panel и data-icon

• Изменение .attr() в .data().

panel и icon не являются атрибутами. data-panel и data-icon являются действительными, а значения - это строки, которые именно то, что вам нужно. .data() - рекомендуемый метод для использования с data-* attributes.

Также .delegate() используется в качестве устаревшего использования .on().

SNIPPET

$('.showhide').on("click", function(e) { 
 
    var panel = $(this).data('panel'); 
 
    console.log(panel); 
 
    var icon = $(this).data('icon'); 
 
    console.log(icon); 
 

 
    $("#" + panel).slideToggle(); 
 
    $("#" + icon).toggleClass('glyphicon-circle-arrow-down glyphicon-circle-arrow-right'); 
 

 
});

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<span class="glyphicon glyphicon-circle-arrow-down" id="skillsicon"></span> <a href='#/' class="showhide" data-panel="panelskills" data-icon="skillsicon">Skill Level</a> 
 

 

 
<div id="panelskills"> 
 
    Some content in here... 
 
</div>

Answer 2

HI Bro попробовать эту скрипку https://jsfiddle.net/pvc3s0ug/11/

Измените JS как этот

$(document).ready(function() {  
    $(document).delegate(".showhide", "click", function(e) { 

     var panel = $(this).attr('panel'); 

     $("#" + panel).slideToggle(); 

     var icon = $(this).attr('icon'); 
    $("#"+ icon).toggleClass('gly-rotate-270'); 

    }); 
});