Collapse on bootstrap 4

Question

Collapse on bootstrap 4

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I want to use the following code in jquery, I do not know if it's right:

$( ".card" ).on( "click", "#menu_arrow", function() {        
    $( "div[class|='collapse']" ).removeClass('show');
});

The menus are in a php loop that displayed the users along with this small menubar on the side of the name:

<div class="right-col col-lg-4 align-self-center align-items-center">
    <a data-toggle="collapse" data-parent="#accordion" id="menu_arrow" href="#collapse<?php echo $matricula['id']; ?>" aria-expanded="true" aria-controls="collapse<?php echo $matricula['id']; ?>">Menu de opções <i class="fa fa-caret-down" id="caret2" aria-hidden="true"></i></a>
    <div id="collapse<?php echo $matricula['id']; ?>" class="collapse hide" role="tabpanel" aria-labelledby="heading<?php echo $matricula['id']; ?>">
        <div class="opt"><a href="<?php echo $url_base . "/painel/editar_usuarios.php?id=" . $matricula['id']; ?>"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Editar cadastro</a></div>
        <div class="opt"><a href="#"><i class="fa fa-list-alt" aria-hidden="true"></i> Editar boletim</a></div>
        <div class="opt"><a href="#"><i class="fa fa-file-text" aria-hidden="true"></i> Imprimir histórico</a></div>
        <div class="opt"><a href="#"><i class="fa fa-file-text" aria-hidden="true"></i> Imprimir ficha</a></div>
        <div class="opt"><a href="#"><i class="fa fa-folder" aria-hidden="true"></i> Portifólio</a></div>
    </div>
</div>

php javascript jquery bootstrap

asked by anonymous 06.10.2017 / 23:26

2 answers

Create id field with CheckBox DataTable Jquery Size of a dynamic array

score 1 · Answer 1

In order for you to hide the menu when you click on any option you can use collapse("hide") , you must apply the action of click on all <a> tags that are within divs with class collapse .

Your javascript function would look like this:

 $(".collapse a").click(function() {
       $(this).closest(".collapse").collapse("hide");
 });

Remembering that I made use of $(this).closest(".collapse") because it seems to me that you are generating the divs with the collapse inside a for and it had to be generic, otherwise it would only be necessary to call the id of the element.

score 0 · Answer 2

I was able to solve using a jquery selector type, to select all the elements with the class "menu_arrow_container" that I created to identify where the menu is.

$(".menu_container a").click(function() {
   $('div[class*="menu_arrow_container"]').closest(".collapse").collapse("hide");
});