Скрытие и изменение элементов div в Jquery

Привет, ребята! Мне нужна ваша помощь, у меня есть две кнопки на веб-странице, когда нажимается кнопка 1, под ней появляется стрелка, и цвет фона кнопки изменяется, когда нажимается кнопка 2, применяется то же самое, но стрелка под кнопкой 1 исчезает, а цвет фона меняется.

Я реализовал большинство из этих свойств, но не могу понять, почему после нажатия на кнопку 2, возвращаясь к кнопке 1, стрелка под кнопкой 2 не скрывается.

вот мой код

++++++++ HTML +++++++

 $(document).ready(function() {
                $('#select').click(function(){
                    $(this).css('background','#1169ff');
                    $(this).css('color','#ecf0f1');
                    $('#triangle_down').add('#triangle_down1').show();
                    if($('#select1').css('background','#1169ff') && $('#select1').css('color','#ecf0f1')){
                        $('#select1').css('background','#ecf0f1');
                        $('#select1').css('color','#1169ff');
                    } else if($('#triangle_down2').add('#triangle_down3').addClass('hidden')){
                        $('#triangle_down').add('#triangle_down1').show();
                    }


                });
                $('#select1').on('click', function() {
                    $(this).css('background','#1169ff');
                    $(this).css('color','#ecf0f1');
                    $('#triangle_down').add('#triangle_down1').addClass('hidden');
                    $('#select').css('background','#ecf0f1');
                    $('#select').css('color','#1169ff');
                    $('#triangle_down2').add('#triangle_down3').show();
                });

            })
#subscribe p{
text-align:center;
}
#subscribe input {
background: rgba(255, 255, 255, 0.52);
color: #666666;
vertical-align: middle;
width: 593px;
border: 1px solid rgba(255, 255, 255, 0.76);
padding: 0 10px;
height: 60px;
 font-size: 20px;
 outline: 0;
}
#subscribe input[type="submit"]{
background: rgb(255, 135, 19);
color: #ecf0f1;
/*width: auto;*/
padding: 14px 25px;
cursor: pointer;
margin-left: 50px
font-weight: bold; 
height: 60px;
display: inline-block;
border: 2px solid;
 font-size: 20px;
 outline: 0;
}

#subscribe button[id="select"],[id="select1"]{
background: #ecf0f1;
 width: 370px;
 height: 60px;
 /*padding-left: 100px;*/
 /*padding-right: 100px;*/
 padding: 0 10px;
 vertical-align: middle;
 font-size: 20px;
 outline: 0;
 color: #1169ff;
 border: 2px solid;
 text-align:center;

}

#subscribe input[id="main"] {
 width: 150px;
 outline: 0;
}
#triangle_down {

 position:absolute;
    width: 0;
    height: 0;
    border-top: 15px solid #1169ff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
 top:125px;
    left:90px;

}

#triangle_down1 {

 position:absolute;
    width: 0;
    height: 0;
    border-top: 20px solid #ecf0f1;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
 top:125px;
    left:88px;

}
#triangle_down3 {

 position:absolute;
    width: 0;
    height: 0;
    border-top: 15px solid #1169ff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
 top:125px;
    left:464px;

}

#triangle_down2 {

 position:absolute;
    width: 0;
    height: 0;
    border-top: 20px solid #ecf0f1;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
 top:125px;
    left:462px;

}
<div id="subscribe">
                <form action="" method="post" onsubmit="">
                    <p>

                        <button type="button" id="select">Acheter</button>
                        <button type="button" id="select1">Louer</button>

                    </p>


                  <!-- Using 2 traingles to achieve border outline :) -->
                    <i id="triangle_down1" style="display: none"><i></i></i>
                  <i id="triangle_down" style="display: none"><i></i></i><br/>

                    <!--Louer triangles -->
                  <i id="triangle_down2" style="display: none"><i></i></i>
                  <i id="triangle_down3" style="display: none"><i></i></i><br/>

                    <div></div>

                    <p><input name="" placeholder="Entrer une ville au Maroc" type="text" id="landing-entry"/>
                        <a href="/results"> <input type="submit" id="main" value="Search"/></a>
                    </p>
                </form>

Спасибо

Источник

3 ответа

Решение

Основная проблема заключается в том, что вы используете .addClass('hidden') при использовании .show()

JQuery немного переменчив, когда дело доходит до показа, скрытия и переключения, но они накладывают встроенный стиль на этот элемент либо display: hidden или же display: show, Ваш класс "скрытый" переопределяется встроенным стилем, размещенным jQuery.

Просто будьте последовательны, когда вы показываете и прячете вещи. Либо используйте стили линий, такие как добавление / удаление классов "скрытый" или "показанный", либо использование .show(), .hide(), а также .toggle() функции из jQuery.

Я очистил код и поместил все это в jsfiddle. Надеюсь, это поможет https://jsfiddle.net/agayn7yn/

Источник

Это делает это, посмотрите на переключение jquery или другие способы сделать это, поскольку ваш код очень сложен для работы в mo. добавленной $('#triangle_down2').add('#triangle_down3').hide(); в первый клик f

$(document).ready(function() {
                $('#select').click(function(){
                    $(this).css('background','#1169ff');
                    $(this).css('color','#ecf0f1');
                    $('#triangle_down').add('#triangle_down1').show();
                    if($('#select1').css('background','#1169ff') && $('#select1').css('color','#ecf0f1')){
                        $('#select1').css('background','#ecf0f1');
                        $('#select1').css('color','#1169ff');
                      $('#triangle_down2').add('#triangle_down3').hide();
                    } else if($('#triangle_down2').add('#triangle_down3').addClass('hidden')){
                        $('#triangle_down').add('#triangle_down1').show();
                    }


                });
                $('#select1').on('click', function() {
                    $(this).css('background','#1169ff');
                    $(this).css('color','#ecf0f1');
                    $('#triangle_down').add('#triangle_down1').hide();
                    $('#select').css('background','#ecf0f1');
                    $('#select').css('color','#1169ff');
                    $('#triangle_down2').add('#triangle_down3').show();
                });

            })
#subscribe p{
text-align:center;
}
#subscribe input {
background: rgba(255, 255, 255, 0.52);
color: #666666;
vertical-align: middle;
width: 593px;
border: 1px solid rgba(255, 255, 255, 0.76);
padding: 0 10px;
height: 60px;
 font-size: 20px;
 outline: 0;
}
#subscribe input[type="submit"]{
background: rgb(255, 135, 19);
color: #ecf0f1;
/*width: auto;*/
padding: 14px 25px;
cursor: pointer;
margin-left: 50px
font-weight: bold; 
height: 60px;
display: inline-block;
border: 2px solid;
 font-size: 20px;
 outline: 0;
}

#subscribe button[id="select"],[id="select1"]{
background: #ecf0f1;
 width: 370px;
 height: 60px;
 /*padding-left: 100px;*/
 /*padding-right: 100px;*/
 padding: 0 10px;
 vertical-align: middle;
 font-size: 20px;
 outline: 0;
 color: #1169ff;
 border: 2px solid;
 text-align:center;

}

#subscribe input[id="main"] {
 width: 150px;
 outline: 0;
}
#triangle_down {

 position:absolute;
    width: 0;
    height: 0;
    border-top: 15px solid #1169ff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
 top:125px;
    left:90px;

}

#triangle_down1 {

 position:absolute;
    width: 0;
    height: 0;
    border-top: 20px solid #ecf0f1;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
 top:125px;
    left:88px;

}
#triangle_down3 {

 position:absolute;
    width: 0;
    height: 0;
    border-top: 15px solid #1169ff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
 top:125px;
    left:464px;

}

#triangle_down2 {

 position:absolute;
    width: 0;
    height: 0;
    border-top: 20px solid #ecf0f1;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
 top:125px;
    left:462px;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="subscribe">
                <form action="" method="post" onsubmit="">
                    <p>

                        <button type="button" id="select">Acheter</button>
                        <button type="button" id="select1">Louer</button>

                    </p>


                  <!-- Using 2 traingles to achieve border outline :) -->
                    <i id="triangle_down1" style="display: none"><i></i></i>
                  <i id="triangle_down" style="display: none"><i></i></i><br/>

                    <!--Louer triangles -->
                  <i id="triangle_down2" style="display: none"><i></i></i>
                  <i id="triangle_down3" style="display: none"><i></i></i><br/>

                    <div></div>

                    <p><input name="" placeholder="Entrer une ville au Maroc" type="text" id="landing-entry"/>
                        <a href="/results"> <input type="submit" id="main" value="Search"/></a>
                    </p>
                </form>

Источник

Вы не скрываете треугольные делители, а просто добавляете класс "скрытый", который фактически не применяет никаких свойств CSS.

вместо addClass('hidden') ты хочешь использовать hide()

это будет использовать встроенный стиль, чтобы показать / скрыть div, который обеспечивает высочайший уровень специфичности CSS

Источник
Другие вопросы по тегам