ポップアップメニューのグラフィックアイコンを変更する

Question

ポップアップメニューのグラフィックアイコンを変更したい^。ポップアップサブメニューが表示されているときに^を変更する必要があります。表示されていない場合は>にする必要があります。

$(document).ready(function() { 
 
      $('.popup1').click(function(){ 
 
\t \t \t  $('.popupMenu1').slideToggle(); 
 
\t   }) 
 
\t \t \t $('.popup2').click(function(){ 
 
\t \t \t  $('.popupMenu2').slideToggle(); 
 
\t   }) 
 
\t \t \t $('.popup3').click(function(){ 
 
\t \t \t  $('.popupMenu3').slideToggle(); 
 
\t   }) 
 
\t }); \t

.popupMenu1,.popupMenu2,.popupMenu3{ 
 
display:none; \t 
 
} 
 
.popup1,.popup,.popup2,.popup3{ 
 
\t cursor:pointer; 
 
\t 
 
} 
 
.popupMenu1 > li >a,.popup,.popupMenu2 > li >a,.popupMenu3 > li >a{ 
 
\t 
 
\t 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<div class="parentMobileMenu"> 
 
\t \t \t <p class="popup1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services</p> 
 
\t \t \t  <ul class="popupMenu1"> 
 
\t \t \t \t <li><a href="#">Product Engineering</a></li> 
 
\t \t \t \t <li><a href="#">Enterprise Solutions</a></li> 
 
\t \t \t \t <li><a href="#">Independent Testing Services</a></li> 
 
\t \t \t \t <li><a href="#">Digital Transformation</a></li> 
 
\t \t \t \t <li><a href="#">Infrastructure &amp; Application Support</a></li> 
 
\t \t \t \t <li><a href="#">Business Intelligence</a></li> 
 
\t \t \t \t <li><a href="#">Oracle Applications</a></li> 
 
\t \t \t \t <li><a href="#">Big Data Analytic</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t <p class="popup2" ><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions</p> 
 
\t \t \t  <ul class="popupMenu2"> 
 
          <li> 
 
           <a href="#">Auras</a> 
 
           <br> 
 
           <a href="#">Tapshop</a> 
 
           <br> 
 
           <a href="#">Temenos AFIS</a> 
 
           <br> 
 
          </li> 
 
          <li> 
 
           <a href="#">MPoS</a> 
 
           <br> 
 
           <a href="#">Techcello</a> 
 
           <br> 
 
          </li> 
 
         </ul> 
 
\t \t \t <p class="popup3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries</p> 
 
\t \t \t  <ul class="popupMenu3"> 
 
          <li> 
 
           <a href="#">Independent Software Vendors</a> 
 
           <br> 
 
           <a href="#">Healthcare</a> 
 
           <br> 
 
          </li> 
 
          <li> 
 
           <a href="#">Retail</a> 
 
           <br> 
 
           <a href="#">Education</a> 
 
           <br> 
 
          </li> 
 
          <li> 
 
           <a href="#">Media and Publishing</a> 
 
           <br> 
 
           <a href="#">Insurance and Financial Services</a> 
 
           <br> 
 
          </li> 
 

 

 
         </ul> 
 
\t \t \t <p class="popup"><span class="glyphicon glyphicon-none"></span>Digital</p> 
 
\t \t \t <p class="popup"><span class="glyphicon glyphicon-none"></span>Perspectives</p> 
 
\t \t \t <p class="popup"><span class="glyphicon glyphicon-none"></span>About</p> 
 
\t \t \t </div>

Answer 1

だけCSSにクラスを追加し、rotate-90degでtransformプロパティを追加し、クリックが起こるたびにすることができtoggle​​にclassいます。以下では、追加のrotateクラスを追加し、そのクラスを切り替えることにしました。

$(document).ready(function() { 
 
    $('.popup1').click(function() { 
 
    $(this).find('span.glyphicon').toggleClass('rotate'); 
 
    $('.popupMenu1').slideToggle(); 
 
    }) 
 
    $('.popup2').click(function() { 
 
    $(this).find('span.glyphicon').toggleClass('rotate'); 
 
    $('.popupMenu2').slideToggle(); 
 
    }) 
 
    $('.popup3').click(function() { 
 
    $(this).find('span.glyphicon').toggleClass('rotate'); 
 
    $('.popupMenu3').slideToggle(); 
 
    }) 
 
});

.popupMenu1, 
 
.popupMenu2, 
 
.popupMenu3 { 
 
    display: none; 
 
} 
 
.popup1, 
 
.popup, 
 
.popup2, 
 
.popup3 { 
 
    cursor: pointer; 
 
} 
 
.popupMenu1 > li >a, 
 
.popup, 
 
.popupMenu2 > li >a, 
 
.popupMenu3 > li >a {} 
 

 
.rotate { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<div class="parentMobileMenu"> 
 
    <p class="popup1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services</p> 
 
    <ul class="popupMenu1"> 
 
    <li><a href="#">Product Engineering</a> 
 
    </li> 
 
    <li><a href="#">Enterprise Solutions</a> 
 
    </li> 
 
    <li><a href="#">Independent Testing Services</a> 
 
    </li> 
 
    <li><a href="#">Digital Transformation</a> 
 
    </li> 
 
    <li><a href="#">Infrastructure &amp; Application Support</a> 
 
    </li> 
 
    <li><a href="#">Business Intelligence</a> 
 
    </li> 
 
    <li><a href="#">Oracle Applications</a> 
 
    </li> 
 
    <li><a href="#">Big Data Analytic</a> 
 
    </li> 
 
    </ul> 
 
    <p class="popup2"><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions</p> 
 
    <ul class="popupMenu2"> 
 
    <li> 
 
     <a href="#">Auras</a> 
 
     <br> 
 
     <a href="#">Tapshop</a> 
 
     <br> 
 
     <a href="#">Temenos AFIS</a> 
 
     <br> 
 
    </li> 
 
    <li> 
 
     <a href="#">MPoS</a> 
 
     <br> 
 
     <a href="#">Techcello</a> 
 
     <br> 
 
    </li> 
 
    </ul> 
 
    <p class="popup3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries</p> 
 
    <ul class="popupMenu3"> 
 
    <li> 
 
     <a href="#">Independent Software Vendors</a> 
 
     <br> 
 
     <a href="#">Healthcare</a> 
 
     <br> 
 
    </li> 
 
    <li> 
 
     <a href="#">Retail</a> 
 
     <br> 
 
     <a href="#">Education</a> 
 
     <br> 
 
    </li> 
 
    <li> 
 
     <a href="#">Media and Publishing</a> 
 
     <br> 
 
     <a href="#">Insurance and Financial Services</a> 
 
     <br> 
 
    </li> 
 

 

 
    </ul> 
 
    <p class="popup"><span class="glyphicon glyphicon-none"></span>Digital</p> 
 
    <p class="popup"><span class="glyphicon glyphicon-none"></span>Perspectives</p> 
 
    <p class="popup"><span class="glyphicon glyphicon-none"></span>About</p> 
 
</div>

---

UPDATE

あなたのコードでは、よりいくつかの共通classと単純である特定の共通classにクリックを取り付けることができます。以下の例を参照してください。

$(document).ready(function() { 
 
    $('.popup').click(function() { 
 
    var target = $(this).data('target'); //get the target element 
 
    $(this).find('span.glyphicon').toggleClass('rotate'); 
 
    $(target).slideToggle(); 
 
    }) 
 
});

.popupMenu1, 
 
.popupMenu2, 
 
.popupMenu3 { 
 
    display: none; 
 
} 
 
.popup1, 
 
.popup, 
 
.popup2, 
 
.popup3 { 
 
    cursor: pointer; 
 
} 
 
.popupMenu1 > li >a, 
 
.popup, 
 
.popupMenu2 > li >a, 
 
.popupMenu3 > li >a {} 
 

 
.rotate { 
 
    -webkit-transform: rotate(90deg); 
 
    -moz-transform: rotate(90deg); 
 
    -o-transform: rotate(90deg); 
 
    -ms-transform: rotate(90deg); 
 
    transform: rotate(90deg); 
 
    
 
    transition:all .5s; /*Animation*/ 
 
    /*Add for other browser specific as above you see in transform 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
<div class="parentMobileMenu"> 
 
    <p class="popup1 popup" data-target=".popupMenu1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services</p> 
 
    <ul class="popupMenu1"> 
 
    <li><a href="#">Product Engineering</a> 
 
    </li> 
 
    <li><a href="#">Enterprise Solutions</a> 
 
    </li> 
 
    <li><a href="#">Independent Testing Services</a> 
 
    </li> 
 
    <li><a href="#">Digital Transformation</a> 
 
    </li> 
 
    <li><a href="#">Infrastructure &amp; Application Support</a> 
 
    </li> 
 
    <li><a href="#">Business Intelligence</a> 
 
    </li> 
 
    <li><a href="#">Oracle Applications</a> 
 
    </li> 
 
    <li><a href="#">Big Data Analytic</a> 
 
    </li> 
 
    </ul> 
 
    <p class="popup2 popup" data-target=".popupMenu2"><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions</p> 
 
    <ul class="popupMenu2"> 
 
    <li> 
 
     <a href="#">Auras</a> 
 
     <br> 
 
     <a href="#">Tapshop</a> 
 
     <br> 
 
     <a href="#">Temenos AFIS</a> 
 
     <br> 
 
    </li> 
 
    <li> 
 
     <a href="#">MPoS</a> 
 
     <br> 
 
     <a href="#">Techcello</a> 
 
     <br> 
 
    </li> 
 
    </ul> 
 
    <p class="popup3 popup" data-target=".popupMenu3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries</p> 
 
    <ul class="popupMenu3"> 
 
    <li> 
 
     <a href="#">Independent Software Vendors</a> 
 
     <br> 
 
     <a href="#">Healthcare</a> 
 
     <br> 
 
    </li> 
 
    <li> 
 
     <a href="#">Retail</a> 
 
     <br> 
 
     <a href="#">Education</a> 
 
     <br> 
 
    </li> 
 
    <li> 
 
     <a href="#">Media and Publishing</a> 
 
     <br> 
 
     <a href="#">Insurance and Financial Services</a> 
 
     <br> 
 
    </li> 
 

 

 
    </ul> 
 
    <p class="popup"><span class="glyphicon glyphicon-none"></span>Digital</p> 
 
    <p class="popup"><span class="glyphicon glyphicon-none"></span>Perspectives</p> 
 
    <p class="popup"><span class="glyphicon glyphicon-none"></span>About</p> 
 
</div>

Answer 2

ただ、ここのような

$('.popup1').click(function(){ 
    $('.popupMenu1').slideToggle(); 
    if $('.popup1').has_class('glyphicon-triangle-right') { 
     $('.popup1').remove_class('glyphicon-triangle-right').add_class('glyphicon-triangle-top'); 
    } else { 
     $('.popup1').remove_class('glyphicon-triangle-top').add_class('glyphicon-triangle-right'); 
    } 
}) 

Answer 3

の下にスクリプトを変更する一般的な機能を持つjQueryのソリューションです。

$(document).ready(function() { 
 
       $('.popup1').click(function(){ 
 
         
 
    \t \t \t  $('.popupMenu1').slideToggle(); 
 
        toggleclass($(this)); 
 
    \t   }) 
 
    \t \t \t $('.popup2').click(function(){ 
 
    \t \t \t  $('.popupMenu2').slideToggle(); 
 
        toggleclass($(this)); 
 
    \t   }) 
 
    \t \t \t $('.popup3').click(function(){ 
 
    \t \t \t  $('.popupMenu3').slideToggle(); 
 
        toggleclass($(this)); 
 
    \t   }) 
 
    \t }); \t 
 

 
function toggleclass(obj){ 
 
    if ($(obj).find('span').hasClass('glyphicon-triangle-right')) { 
 
    $(obj).find('span').removeClass('glyphicon-triangle-right'); 
 
    $(obj).find('span').addClass('glyphicon-triangle-bottom'); 
 
} else { 
 
    $(obj).find('span').removeClass('glyphicon-triangle-bottom'); 
 
    $(obj).find('span').addClass('glyphicon-triangle-right'); 
 
} 
 
}

.popupMenu1,.popupMenu2,.popupMenu3{ 
 
    display:none; \t 
 
    } 
 
    .popup1,.popup,.popup2,.popup3{ 
 
    \t cursor:pointer; 
 
    \t 
 
    } 
 
    .popupMenu1 > li >a,.popup,.popupMenu2 > li >a,.popupMenu3 > li >a{ 
 
    \t 
 
    \t 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
    <div class="parentMobileMenu"> 
 
    \t \t \t <p class="popup1"><span class="glyphicon glyphicon-triangle-right" id="arrow1"></span>Services</p> 
 
    \t \t \t  <ul class="popupMenu1"> 
 
    \t \t \t \t <li><a href="#">Product Engineering</a></li> 
 
    \t \t \t \t <li><a href="#">Enterprise Solutions</a></li> 
 
    \t \t \t \t <li><a href="#">Independent Testing Services</a></li> 
 
    \t \t \t \t <li><a href="#">Digital Transformation</a></li> 
 
    \t \t \t \t <li><a href="#">Infrastructure &amp; Application Support</a></li> 
 
    \t \t \t \t <li><a href="#">Business Intelligence</a></li> 
 
    \t \t \t \t <li><a href="#">Oracle Applications</a></li> 
 
    \t \t \t \t <li><a href="#">Big Data Analytic</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t <p class="popup2" ><span class="glyphicon glyphicon-triangle-right" id="arrow2"></span>Solutions</p> 
 
    \t \t \t  <ul class="popupMenu2"> 
 
           <li> 
 
            <a href="#">Auras</a> 
 
            <br> 
 
            <a href="#">Tapshop</a> 
 
            <br> 
 
            <a href="#">Temenos AFIS</a> 
 
            <br> 
 
           </li> 
 
           <li> 
 
            <a href="#">MPoS</a> 
 
            <br> 
 
            <a href="#">Techcello</a> 
 
            <br> 
 
           </li> 
 
          </ul> 
 
    \t \t \t <p class="popup3"><span class="glyphicon glyphicon-triangle-right" id="arrow3"></span>Industries</p> 
 
    \t \t \t  <ul class="popupMenu3"> 
 
           <li> 
 
            <a href="#">Independent Software Vendors</a> 
 
            <br> 
 
            <a href="#">Healthcare</a> 
 
            <br> 
 
           </li> 
 
           <li> 
 
            <a href="#">Retail</a> 
 
            <br> 
 
            <a href="#">Education</a> 
 
            <br> 
 
           </li> 
 
           <li> 
 
            <a href="#">Media and Publishing</a> 
 
            <br> 
 
            <a href="#">Insurance and Financial Services</a> 
 
            <br> 
 
           </li> 
 

 

 
          </ul> 
 
    \t \t \t <p class="popup"><span class="glyphicon glyphicon-none"></span>Digital</p> 
 
    \t \t \t <p class="popup"><span class="glyphicon glyphicon-none"></span>Perspectives</p> 
 
    \t \t \t <p class="popup"><span class="glyphicon glyphicon-none"></span>About</p> 
 
    \t \t \t </div>