How do I prevent it from closing inside the container?

Question

How do I prevent it from closing inside the container?

Navigation

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

2

I EDIT THE QUESTION FOR IT TO BE CLEAR. I expressed myself fatally and mixed several questions.

Question 1

Good, how can I make it so that it only closes, when I click outside (or on the button) and everything returns to its original state, for example that the edge is 1px thick?

Question 2 (solved, thanks to the answers below @Jordifreek and @ lois6b ♦, basically that you should not center the click on the entire container, you should do it on a button, link .. (look at @Jordifreek's)).

Right now when you click on any point in the container it closes, and that is a problem, for example when you want to search, or checkboxes.

$(document).ready(function() {

  $('.Enfoque-General').click(function() {
    $('.Enfoque-General-Extendido').fadeToggle(50);
    $('.Enfoque-General').css("border", "2px solid");
    $('.icon-keyboard_arrow_down').css("display", "none");
    $('.icon-keyboard_arrow_up').css("display", "block");
  });

});

#Descripcion-Entreno {
  color: grey;
  margin: 10px 0 20px;
}

.Enfoque-General {
  height: auto;
  width: 200px;
  padding: 5px;
  border: 0.1px solid;
  border-color: #21211d;
}

.Enfoque-General:hover {
  border: 2px solid;
}

.icon-keyboard_arrow_down {
  float: right;
}

.icon-keyboard_arrow_up {
  float: right;
  display: none;
}

.Enfoque-General-Extendido {
  padding-top: 5px;
  box-sizing: border-box;
  display: none;
}

.Enfoque-General-Extendido input {
  margin: 3px;
}

.Buscar-Filtros-Entreno {
  height: auto;
  width: 75%;
  font-size: 16px;
  border-bottom: 1px solid;
  border-bottom-color: grey;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

#Btn-Cerrar {
  height: auto;
  width: 180px;
  background-color: transparent;
  font-family: sans-serif;
  font-size: 16px;
  border: 1px solid;
  border-color: #21211d;
}

#Btn-Cerrar:hover {
  background-color: #21211d;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Contenido">
  <h1> Generador de rutinas </h1>

  <p id="Descripcion-Entreno">
    En este apartado podrás crear rutinas, conocer músculos implicados.
  </p>

  <div class="Enfoque-General">
    Enfoque general
    <span class="icon-keyboard_arrow_down"></span>
    <span class="icon-keyboard_arrow_up"></span>

    <div class="Enfoque-General-Extendido">
      <input type="text" class="Buscar-Filtros-Entreno" placeholder="Buscar"> <span class="icon-search"></span> <br>
      <input type="checkbox"> Weider <br>
      <input type="checkbox"> Push / Pull <br>
      <input type="checkbox"> Calistenia <br>

      <input type="button" id="Btn-Cerrar" value="Cerrar">
    </div>

  </div>
</div>

Thank you!

jquery css

asked by NEA 26.10.2017 в 12:04

source

2 answers

memset does not work with large numbers Multiple filtering in an ArrayList

score 2 · Answer 1

To differentiate where you click, in the function you can pass the parameter e of the click event.

Inside you can put a condition so that if the id of where you have clicked is the one of the contenndor, that the Toggle does.

I gave the container the id "container", for example.

$('.Enfoque-General').click(function(e) {

    if (e.target.id == "contenedor") {
    ...

To get it back to 1px thick, I put a check before doing the toggle. If the .Enfoque-General-Extendido is with display:none , hidden, then put it to size 2px. And if it is not at none that puts 1px.

if ($(".Enfoque-General-Extendido").css("display") == "none")
    $('.Enfoque-General').css("border", "2px solid");
  else
    $('.Enfoque-General').css("border", "1px solid");

Notes:

At your event hover you have to put !important; at the end so that when the thickness changes, the event continues to apply.
```
.Enfoque-General:hover {
    border: 2px solid !important;
}
```

I also added the Click event to the "Close" button to close it if you click on it

  $('#Btn-Cerrar').click(function() {
      $('.Enfoque-General-Extendido').fadeToggle(50);
  });

$(document).ready(function() {

  $('.Enfoque-General').click(function(e) {

    if (e.target.id == "contenedor") {
      if ($(".Enfoque-General-Extendido").css("display") == "none")
        $('.Enfoque-General').css("border", "2px solid");
      else
        $('.Enfoque-General').css("border", "1px solid");
        
      $('.Enfoque-General-Extendido').fadeToggle(50);

      $('.icon-keyboard_arrow_down').css("display", "none");
      $('.icon-keyboard_arrow_up').css("display", "block");
    }
  });
  
  $('#Btn-Cerrar').click(function() {
    $('.Enfoque-General-Extendido').fadeToggle(50);
  });

});

#Descripcion-Entreno {
  color: grey;
  margin: 10px 0 20px;
}

.Enfoque-General {
  height: auto;
  width: 200px;
  padding: 5px;
  border: 0.1px solid;
  border-color: #21211d;
}

.Enfoque-General:hover {
  border: 2px solid !important;
}

.icon-keyboard_arrow_down {
  float: right;
}

.icon-keyboard_arrow_up {
  float: right;
  display: none;
}

.Enfoque-General-Extendido {
  padding-top: 5px;
  box-sizing: border-box;
  display: none;
}

.Enfoque-General-Extendido input {
  margin: 3px;
}

.Buscar-Filtros-Entreno {
  height: auto;
  width: 75%;
  font-size: 16px;
  border-bottom: 1px solid;
  border-bottom-color: grey;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

#Btn-Cerrar {
  height: auto;
  width: 180px;
  background-color: transparent;
  font-family: sans-serif;
  font-size: 16px;
  border: 1px solid;
  border-color: #21211d;
}

#Btn-Cerrar:hover {
  background-color: #21211d;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Contenido">
  <h1> Generador de rutinas </h1>

  <p id="Descripcion-Entreno">
    En este apartado podrás crear rutinas, conocer músculos implicados.
  </p>

  <div class="Enfoque-General" id="contenedor">
    Enfoque general
    <span class="icon-keyboard_arrow_down"></span>
    <span class="icon-keyboard_arrow_up"></span>

    <div class="Enfoque-General-Extendido">
      <input type="text" class="Buscar-Filtros-Entreno" placeholder="Buscar"> <span class="icon-search"></span> <br>
      <input type="checkbox"> Weider <br>
      <input type="checkbox"> Push / Pull <br>
      <input type="checkbox"> Calistenia <br>

      <input type="button" id="Btn-Cerrar" value="Cerrar">
    </div>

  </div>
</div>

score 2 · Answer 2

The click event should not be in the DIV element. General-Focus if not on a button inside it that could be the text "General Approach":

$(document).ready(function() {
  $('.toggle-enfoque-general').click(function(e) {
    e.preventDefault() // evitamos que el href="#" mueva el scroll del navegaodr
    $('.Enfoque-General-Extendido').fadeToggle(50);
    $('.Enfoque-General').css("border", "2px solid");
    $('.icon-keyboard_arrow_down').css("display", "none");
    $('.icon-keyboard_arrow_up').css("display", "block");
  });

  $('#Btn-Cerrar').click(function () {
    $('.Enfoque-General-Extendido').fadeOut(50)
  });
});

#Descripcion-Entreno {
  color: grey;
  margin: 10px 0 20px;
}

.Enfoque-General {
  height: auto;
  width: 200px;
  padding: 5px;
  border: 0.1px solid;
  border-color: #21211d;
}

.Enfoque-General:hover {
  border: 2px solid;
}

.icon-keyboard_arrow_down {
  float: right;
}

.icon-keyboard_arrow_up {
  float: right;
  display: none;
}

.Enfoque-General-Extendido {
  padding-top: 5px;
  box-sizing: border-box;
  display: none;
}

.Enfoque-General-Extendido input {
  margin: 3px;
}

.Buscar-Filtros-Entreno {
  height: auto;
  width: 75%;
  font-size: 16px;
  border-bottom: 1px solid;
  border-bottom-color: grey;
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

#Btn-Cerrar {
  height: auto;
  width: 180px;
  background-color: transparent;
  font-family: sans-serif;
  font-size: 16px;
  border: 1px solid;
  border-color: #21211d;
}

#Btn-Cerrar:hover {
  background-color: #21211d;
  color: #FFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Contenido">
  <h1> Generador de rutinas </h1>

  <p id="Descripcion-Entreno">
    En este apartado podrás crear rutinas, conocer músculos implicados.
  </p>

  <div class="Enfoque-General">
    <a href="#" class="toggle-enfoque-general">Enfoque general</a>
    <span class="icon-keyboard_arrow_down"></span>
    <span class="icon-keyboard_arrow_up"></span>

    <div class="Enfoque-General-Extendido">
      <input type="text" class="Buscar-Filtros-Entreno" placeholder="Buscar"> <span class="icon-search"></span> <br>
      <input type="checkbox"> Weider <br>
      <input type="checkbox"> Push / Pull <br>
      <input type="checkbox"> Calistenia <br>

      <input type="button" id="Btn-Cerrar" value="Cerrar">
    </div>

  </div>
</div>