मेरे पास एक मेनू (एकॉर्डियन) है जो बूटस्ट्रैप 3.3.7 और फ़ॉन्ट विस्मयकारी 5.0.1 का उपयोग करता है

मैं क्या ढूंढ रहा हूं:

जब मेनू बंद हो जाता है, तो एक "प्लस" आइकन प्रदर्शित होता है।

जब मेनू खुला होता है, तो एक "माइनस" आइकन प्रदर्शित होता है।

"प्लस" आइकन मेनू पर प्रदर्शित होता है लेकिन बदलता नहीं है।

मुझे लगता है कि मेरे जेएस कोड में कोई समस्या है।

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading panel-like">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-heart fa-w-18 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M414.9 24C361.8 24 312 65.7 288 89.3 264 65.7 214.2 24 161.1 24 70.3 24 16 76.9 16 165.5c0 72.6 66.8 133.3 69.2 135.4l187 180.8c8.8 8.5 22.8 8.5 31.6 0l186.7-180.2c2.7-2.7 69.5-63.5 69.5-136C560 76.9 505.7 24 414.9 24z"></path></svg><!-- <i class="fas fa-heart fa-lg"></i> --> Ses pages préférées <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
      <div class="panel-body">
        <div class="panel-help">
          L'utilisateur peut montrer ou cacher ce qu'il aime.<br>
          Les badges verts affichent le nombre total de j'aime (même les cachés).<br>
          Les résultats affichent uniquement ce que l'utilisateur souhaite montrer.
        </div>
      </div>
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profile-page-like view-id-profile_page_like view-display-id-block_1 js-view-dom-id-9c91349966910a86b1ba6a9c66ae52b7b92568e7856bfc40d447149fed9dc49f">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Cet utilisateur n'a mis aucune mention j'aime.</p>

    </div>



          </div>
</div>
</dd></div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading panel-contest">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-trophy fa-w-18 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="trophy" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M552 64H448V24c0-13.3-10.7-24-24-24H152c-13.3 0-24 10.7-24 24v40H24C10.7 64 0 74.7 0 88v56c0 35.7 22.5 72.4 61.9 100.7 31.5 22.7 69.8 37.1 110 41.7C203.3 338.5 240 360 240 360v72h-48c-35.3 0-64 20.7-64 56v12c0 6.6 5.4 12 12 12h296c6.6 0 12-5.4 12-12v-12c0-35.3-28.7-56-64-56h-48v-72s36.7-21.5 68.1-73.6c40.3-4.6 78.6-19 110-41.7 39.3-28.3 61.9-65 61.9-100.7V88c0-13.3-10.7-24-24-24zM99.3 192.8C74.9 175.2 64 155.6 64 144v-16h64.2c1 32.6 5.8 61.2 12.8 86.2-15.1-5.2-29.2-12.4-41.7-21.4zM512 144c0 16.1-17.7 36.1-35.3 48.8-12.5 9-26.7 16.2-41.8 21.4 7-25 11.8-53.6 12.8-86.2H512v16z"></path></svg><!-- <i class="fas fa-trophy fa-lg"></i> --> Les concours remportés <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse2" class="panel-collapse collapse" aria-expanded="false">
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profil-page-concours view-id-profil_page_concours view-display-id-block_1 js-view-dom-id-c93650dc04dbe389c2eebfbc710083ad849dc98a77b48f8161cbae68609b76fa">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Cet utilisateur n'a remporté aucun concours.</p>

    </div>



          </div>
</div>
</dd></div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <a class="" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-object-group fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="object-group" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M480 128V96h20c6.627 0 12-5.373 12-12V44c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v20H64V44c0-6.627-5.373-12-12-12H12C5.373 32 0 37.373 0 44v40c0 6.627 5.373 12 12 12h20v320H12c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-20h384v20c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12v-40c0-6.627-5.373-12-12-12h-20V128zM96 276V140c0-6.627 5.373-12 12-12h168c6.627 0 12 5.373 12 12v136c0 6.627-5.373 12-12 12H108c-6.627 0-12-5.373-12-12zm320 96c0 6.627-5.373 12-12 12H236c-6.627 0-12-5.373-12-12v-52h72c13.255 0 24-10.745 24-24v-72h84c6.627 0 12 5.373 12 12v136z"></path></svg><!-- <i class="fas fa-object-group fa-lg"></i> --> Ses contenus <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse3" class="panel-collapse collapse in" aria-expanded="true" style="">
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profil-page-contenu view-id-profil_page_contenu view-display-id-block_1 js-view-dom-id-5046ef4a9eab21dfa4bd430068e0d74db0486d12515e1007257e88d26ed3b55b">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Select any filter and click on Apply to see results</p>

    </div>



          </div>
</div>
</dd></div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-gift fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="gift" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M488 192h-64.512C438.72 175.003 448 152.566 448 128c0-52.935-43.065-96-96-96-41.997 0-68.742 20.693-95.992 54.15C226.671 50.192 199.613 32 160 32c-52.935 0-96 43.065-96 96 0 24.566 9.28 47.003 24.512 64H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h8v112c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V320h8c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zm-208-32c24-56 55.324-64 72-64 17.645 0 32 14.355 32 32s-14.355 32-32 32h-72zM160 96c16.676 0 48 8 72 64h-72c-17.645 0-32-14.355-32-32s14.355-32 32-32zm48 128h96v184c0 13.255-10.745 24-24 24h-48c-13.255 0-24-10.745-24-24V224z"></path></svg><!-- <i class="fas fa-gift fa-lg"></i> --> Ses produits <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse4" class="panel-collapse collapse" aria-expanded="false">
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profil-page-produit view-id-profil_page_produit view-display-id-block_1 js-view-dom-id-769f9d711f4e8bc30f68415fc4e177720959cfa4d0d5f65a817079d4cb41eb47">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Aucun produit n'a était publié.</p>

    </div>



          </div>
</div>
</dd></div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-users fa-w-20 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="users" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg=""><path fill="currentColor" d="M320 64c57.99 0 105 47.01 105 105s-47.01 105-105 105-105-47.01-105-105S262.01 64 320 64zm113.463 217.366l-39.982-9.996c-49.168 35.365-108.766 27.473-146.961 0l-39.982 9.996C174.485 289.379 152 318.177 152 351.216V412c0 19.882 16.118 36 36 36h264c19.882 0 36-16.118 36-36v-60.784c0-33.039-22.485-61.837-54.537-69.85zM528 300c38.66 0 70-31.34 70-70s-31.34-70-70-70-70 31.34-70 70 31.34 70 70 70zm-416 0c38.66 0 70-31.34 70-70s-31.34-70-70-70-70 31.34-70 70 31.34 70 70 70zm24 112v-60.784c0-16.551 4.593-32.204 12.703-45.599-29.988 14.72-63.336 8.708-85.69-7.37l-26.655 6.664C14.99 310.252 0 329.452 0 351.477V392c0 13.255 10.745 24 24 24h112.169a52.417 52.417 0 0 1-.169-4zm467.642-107.09l-26.655-6.664c-27.925 20.086-60.89 19.233-85.786 7.218C499.369 318.893 504 334.601 504 351.216V412c0 1.347-.068 2.678-.169 4H616c13.255 0 24-10.745 24-24v-40.523c0-22.025-14.99-41.225-36.358-46.567z"></path></svg><!-- <i class="fas fa-users fa-lg"></i> --> Ses groupes <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse5" class="panel-collapse collapse" aria-expanded="false">
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profil-page-groupe view-id-profil_page_groupe view-display-id-block_1 js-view-dom-id-2e32ce43b15b99287bc35ff057edd6a6016a6e24603ee3f32329be118964bc97">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Select any filter and click on Apply to see results</p>

    </div>



          </div>
</div>
</dd></div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse6" aria-expanded="false">
        <h4 class="panel-title">
        <svg class="svg-inline--fa fa-shopping-bag fa-w-14 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="shopping-bag" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M352 160v-32C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128v32H0v272c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V160h-96zm-192-32c0-35.29 28.71-64 64-64s64 28.71 64 64v32H160v-32zm160 120c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm-192 0c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24z"></path></svg><!-- <i class="fas fa-shopping-bag fa-lg"></i> --> Ses boutiques <span class="badge">0</span>
        <span class="collapse-change-icon"><svg class="svg-inline--fa fa-plus-circle fa-w-16 fa-lg" aria-hidden="true" data-prefix="fas" data-icon="plus-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"></path></svg><!-- <i class="fas fa-plus-circle fa-lg"></i> --></span>
        </h4>
      </a>
    </div>
    <div id="collapse6" class="panel-collapse collapse" aria-expanded="false">
      <div class="panel-body"><dd><div class="views-element-container form-group"><div class="view view-profil-page-boutique view-id-profil_page_boutique view-display-id-block_1 js-view-dom-id-9f21023e83a67893ad096dcbb218ba8b477f895466709aba0b5f909f705b740d">


      <div class="view-header">
      Résultat trouvé 0
    </div>

      <div class="view-empty">
      <p>Aucune boutique n'a était publiée.</p>

    </div>



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

यहाँ मेरा जेएस कोड है। इसमें कुछ गड़बड़ है।

(function ($) {

  $('.collapse').on('shown.bs.collapse', function () {
       $(this).find('.collapse-change-icon svg').removeClass("fa-plus-circle").addClass("fa-minus-circle");
  });

  $('.collapse').on('hidden.bs.collapse', function () {
       $(this).find('.collapse-change-icon svg').removeClass("fa-minus-circle").addClass("fa-plus-circle");
  });

})(window.jQuery);

मैंने एक वर्ग "पतन-परिवर्तन-आइकन" जोड़ा, लेकिन मुझे नहीं पता कि यह उपयोगी है और यदि यह अच्छी तरह से रखा गया है।

enter image description here

0
steeve61 30 मार्च 2018, 09:33

3 जवाब

सबसे बढ़िया उत्तर

आप जिस आइकन को बदलना चाहते हैं, वह .collapse DOM एलीमेंट के अंदर नहीं है। यह .panel-heading तत्व के अंदर है।

(function ($) {

    $('.collapse').on('shown.bs.collapse', function () {
        $(this).parent().find('.panel-heading .collapse-change-icon svg').removeClass("fa-plus-circle").addClass("fa-minus-circle");
    });

    $('.collapse').on('hidden.bs.collapse', function () {
        $(this).parent().find('.panel-heading .collapse-change-icon svg').removeClass("fa-minus-circle").addClass("fa-plus-circle");
    });

})(window.jQuery);
0
Omar Muscatello 30 मार्च 2018, 07:01

आप उन सभी को डिफ़ॉल्ट स्थिति (प्लस?)

यहां एक उदाहरण दिया गया है

(function ($) {
    $('.collapsed').on('click', function(){
        // Set all to plus
        $('.collapsed svg').removeClass('fa-minus-circle').addClass('fa-plus-circle');

        // Set this to minus by toggling the classes
        $(this).find('svg').toggleClass('fa-minus-circle fa-plus-circle');
    });
})(window.jQuery);
0
Xhynk 30 मार्च 2018, 07:09
$(".collapsed").click(function(){
 $(this).find('.collapse-change-icon svg').toggleClass('fa-minus-circle fa-plus-circle')
})

परीक्षण नहीं किया, लेकिन अगर चयनकर्ता सही का चयन करता है तो इसे काम करना चाहिए

जब तक उन्होंने jsfiddle टिप्पणी की

0
Munkhdelger Tumenbayar 30 मार्च 2018, 07:22