Оба элемента span внутри div не доступны для кликов

Question

Оба элемента span внутри div не доступны для кликов

Простая альтернатива для проверки 99% писем

public static final String EMAIL_VERIFICATION = "^([\\w-\\.]+){1,64}@([\\w&&[^_]]+){2,255}.[a-z]{2,}$";

-1

javascript jquery html css html5

задан Zeeshan Adil 13 July 2018 в 08:47

5 ответов

Другие вопросы по тегам:

javascript jquery html css html5

Похожие вопросы:

score 4 · Answer 1

Элегантный способ сделать это - использовать метод jQuery toggleClass.

<div class="search-input">
  <div class="input-categories">
    <span class="comm-input-value">Any unit type </span>
    <span class="icon fa fa-angle-down"></span>
  </div>
</div>
<script>
$('.input-categories span').on('click',function(){
        $(this).parent().toggleClass("open");    
});
</script>

score 0 · Answer 2

Ваш код работает хорошо. Проверьте это в этом примере:

$('.input-categories').on('click',function(){
	alert("clicked");
});

.icon{
  margin-left: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="search-input">
  <div class="input-categories">
    <span class="comm-input-value">Any unit type </span>
    <span class="icon fa fa-angle-down"></span>
  </div>
</div>

score 1 · Answer 3

$('.input-categories').on('click', function() {
  $(this).parent().toggleClass('open');
});

@import url("https://use.fontawesome.com/releases/v5.1.0/css/all.css");
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css");
.input-categories {
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>

<div class="search-input">
  <div class="input-categories">
    <span class="comm-input-value">Any unit type </span>
    <span class="icon fa fa-angle-down"></span>
  </div>
</div>

Существуют простые способы написания кода. Зачем писать, когда меньше может сделать?

score 1 · Answer 4

Вы можете использовать это в jQuery, и он будет работать.

$('.input-categories > span').on('click',function(){ 
   if ($(this).parent().hasClass("open")){ 
       $(this).parent().removeClass("open"); 
   }else { 
       $(this).parent().addClass('open'); 
   } 
});

1

ответ дан Zeeshan Adil 17 August 2018 в 13:27

1

в первом if вы проверяете $(this).parent().hasClass("open"). $(this).parent() в вашем случае .input-categories. а затем в else вы редактируете как родительский элемент input-categories, который является .search-input, так и родительский элемент this, который является .input-categories. Это не имеет никакого смысла – Mihai T 13 July 2018 в 07:45

score 1 · Answer 5

1

ответ дан Zeeshan Adil 6 September 2018 в 09:27