Это не работает, чтобы изменить значение CSS с помощью jquery - PullRequest
Новая
       44

Это не работает, чтобы изменить значение CSS с помощью jquery

0 голосов
/ 25 февраля 2019

Я хочу добиться эффекта, заключающегося в том, что, когда я нажимаю кнопку «Разработка пользовательских кабелей и заказ онлайн», содержание аккордеона на шаге 1 рушится, а содержимое шага 2 немедленно расширяется, однако после применения jquery, шаг 2контент не будет расширяться сразу же, и контент шага 1 также не рухнет, кто-нибудь может мне помочь, оцените это! 

$( document ).ready(function()
{
    /*--hide step2 content but show step1's--*/
    $('#F-step1-cont').css('display', 'block');
    $('#F-step2-cont').css('display', 'none');
   

    /*--disable step2 title button initially--*/
    $('#F-step2-title-btn').attr("disabled", true);


    /*----------accordion effect part------------*/
    $('.F-accordion-container-div').click(function ()
    {
        let id = $(this).find('.F-accordion-content').attr('id');
        switch (id)
        {
            case 'F-step1-cont':
                $('#F-step1-cont').css('display', 'block');
                $('#F-step2-cont').css('display', 'none');
                break;
            case 'F-step2-cont':
                $('#F-step1-cont').css('display', 'none');
                $('#F-step2-cont').css('display', 'block');
                break;
      
        }
    });

    $('#F-step1-content-left').click(function ()
    {
        $('#F-step2-cont').css('display', 'block');
        $('#F-step1-cont').css('display', 'none');
		$('#F-step2-title-btn').attr("disabled", false);
    });

});

	
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="CSS.css">
    <!--Jquery-->
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</head>
    

<body>
    <!----Step 1---->
        <div class="F-accordion-container-div">
        <div class="F-accordion-caption">
            <button class="F-accordion-caption-btn">&nbsp;&nbsp;Step 1: &nbsp;Select Cable Builder Tool</button>
        </div>
        <div class="F-accordion-content" id="F-step1-cont">
            <div class="F-step1-content" id="F-step1-content-left">
                <button class="F-step1-content-btn" >Design Custom Cables & Order Online</button>
                <ul>
                  <li>Design using common parts</li>
                  <li>Receive instant pricing</li>
                  <li>Order through shopping cart</li>
                </ul>
            </div><!--
            --><div class="F-step1-content"> 
                <button class="F-step1-content-btn">Send Us Specifications</button>
                <ul>
                  <li>Easy-to-use form</li>
                  <li>Personalized service from our staff</li>
                  <li>Request proceeded quickly</li>
                </ul>
            </div>    
        </div>
        </div>
        
        <!----Step 2---->
        <div class="F-accordion-container-div">
        <div class="F-accordion-caption" >
            <button class="F-accordion-caption-btn" id="F-step2-title-btn">&nbsp;&nbsp;Step 2: &nbsp;Select Type</button>
        </div>
        <div class="F-accordion-content" id="F-step2-cont">
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/bundle.PNG"><!--
                --><div class="F-step2-und-img-ribn">Fiber Optic Assemblies</div>
            </div>
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/single.png">
                <div class="F-step2-und-img-ribn">Fiber Optic Jumper</div>
            </div>
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/bundle.PNG">
                <div class="F-step2-und-img-ribn">Copper Cable Assemblies</div>
            </div>
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/single.png">
                <div class="F-step2-und-img-ribn">Copper Patch Cable</div>
            </div>
        </div>
        </div>
    
</body>

    
<foot>
    <script src="js.js" ></script>
</foot>
</html>

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

Я думаю $ ('. F-accordion-container-div'). Click (function () {}); эта функция создает некоторый конфликт при выполнении 'Design Custom Cables & Order Online'событие нажатия кнопки.Я внес некоторые изменения, надеюсь, это поможет вам. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="CSS.css">
    <!--Jquery-->
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</head>


<body>
    <!----Step 1---->
        <div class="F-accordion-container-div">
        <div class="F-accordion-caption">
            <button class="F-accordion-caption-btn">&nbsp;&nbsp;Step 1: &nbsp;Select Cable Builder Tool</button>
        </div>
        <div class="F-accordion-content" id="F-step1-cont">
            <div class="F-step1-content" id="F-step1-content-left">
                <button class="F-step1-content-btn" >Design Custom Cables & Order Online</button>
                <ul>
                  <li>Design using common parts</li>
                  <li>Receive instant pricing</li>
                  <li>Order through shopping cart</li>
                </ul>
            </div><!--
            --><div class="F-step1-content"> 
                <button class="F-step1-content-btn">Send Us Specifications</button>
                <ul>
                  <li>Easy-to-use form</li>
                  <li>Personalized service from our staff</li>
                  <li>Request proceeded quickly</li>
                </ul>
            </div>    
        </div>
        </div>

        <!----Step 2---->
        <div class="F-accordion-container-div">
        <div class="F-accordion-caption" >
            <button class="F-accordion-caption-btn" id="F-step2-title-btn">&nbsp;&nbsp;Step 2: &nbsp;Select Type</button>
        </div>
        <div class="F-accordion-content" id="F-step2-cont">
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/bundle.PNG"><!--
                --><div class="F-step2-und-img-ribn">Fiber Optic Assemblies</div>
            </div>
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/single.png">
                <div class="F-step2-und-img-ribn">Fiber Optic Jumper</div>
            </div>
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/bundle.PNG">
                <div class="F-step2-und-img-ribn">Copper Cable Assemblies</div>
            </div>
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/single.png">
                <div class="F-step2-und-img-ribn">Copper Patch Cable</div>
            </div>
        </div>
        </div>

</body>


<foot>
    <script src="js.js" ></script>
</foot>
</html>

, и ваш скрипт может быть таким Я использовал функции slideUp и slideDown только для анимации.Вы можете просто использовать css ("display", "block") 

$( document ).ready(function()
{
    /*--hide step2 content but show step1's--*/
    $('#F-step1-cont').show();
    $('#F-step2-cont').hide();

    /*--disable step2 title button initially--*/
    $('#F-step2-title-btn').attr("disabled", true);


    /*----------accordion effect part------------ here i have written it on step 1 and step 2 button*/
    $('.F-accordion-caption-btn').click(function (){
        let id = $(this).parents(".F-accordion-container-div").find('.F-accordion-content').attr('id');
        switch (id)
        {
            case 'F-step1-cont':
                $('#F-step1-cont').css('display', 'block');
                $('#F-step2-cont').css('display', 'none');
                break;
            case 'F-step2-cont':
                $('#F-step1-cont').css('display', 'none');
                $('#F-step2-cont').css('display', 'block');
                break;

        }
    });

    $('.F-step1-content-btn').click(function () {
        $('#F-step2-cont').slideDown();
        $('#F-step1-cont').slideUp();
            $('#F-step2-title-btn').attr("disabled", false);
    });

});

, пожалуйста, найдите ссылку на скрипку для того же [https://codepen.io/anon/pen/eXYZre?editors=1010][1]

0 голосов
/ 25 февраля 2019

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

e.stopPropagation () Предотвращает всплытие события в дереве DOM, предотвращая уведомление любых родительских обработчиков о событии. 

$( document ).ready(function()
{
    /*--hide step2 content but show step1's--*/
    $('#F-step1-cont').css('display', 'block');
    $('#F-step2-cont').css('display', 'none');
   

    /*--disable step2 title button initially--*/
    $('#F-step2-title-btn').attr("disabled", true);


    /*----------accordion effect part------------*/
    $('.F-accordion-container-div').click(function ()
    {
        let id = $(this).find('.F-accordion-content').attr('id');
        switch (id)
        {
            case 'F-step1-cont':
                $('#F-step1-cont').css('display', 'block');
                $('#F-step2-cont').css('display', 'none');
                break;
            case 'F-step2-cont':
                $('#F-step1-cont').css('display', 'none');
                $('#F-step2-cont').css('display', 'block');
                break;
      
        }
    });

    $('#F-step1-content-left button').click(function (e)
    {
        e.stopPropagation();
        $('#F-step2-cont').css('display', 'block');
        $('#F-step1-cont').css('display', 'none');
		    $('#F-step2-title-btn').attr("disabled", false);
    });

});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="CSS.css">
    <!--Jquery-->
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</head>
    


    <!----Step 1---->
        <div class="F-accordion-container-div">
        <div class="F-accordion-caption">
            <button class="F-accordion-caption-btn">&nbsp;&nbsp;Step 1: &nbsp;Select Cable Builder Tool</button>
        </div>
        <div class="F-accordion-content" id="F-step1-cont">
            <div class="F-step1-content" id="F-step1-content-left">
                <button class="F-step1-content-btn" >Design Custom Cables & Order Online</button>
                <ul>
                  <li>Design using common parts</li>
                  <li>Receive instant pricing</li>
                  <li>Order through shopping cart</li>
                </ul>
            </div><!--
            --><div class="F-step1-content"> 
                <button class="F-step1-content-btn">Send Us Specifications</button>
                <ul>
                  <li>Easy-to-use form</li>
                  <li>Personalized service from our staff</li>
                  <li>Request proceeded quickly</li>
                </ul>
            </div>    
        </div>
        </div>
        
        <!----Step 2---->
        <div class="F-accordion-container-div">
        <div class="F-accordion-caption" >
            <button class="F-accordion-caption-btn" id="F-step2-title-btn">&nbsp;&nbsp;Step 2: &nbsp;Select Type</button>
        </div>
        <div class="F-accordion-content" id="F-step2-cont">
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/bundle.PNG"><!--
                --><div class="F-step2-und-img-ribn">Fiber Optic Assemblies</div>
            </div>
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/single.png">
                <div class="F-step2-und-img-ribn">Fiber Optic Jumper</div>
            </div>
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/bundle.PNG">
                <div class="F-step2-und-img-ribn">Copper Cable Assemblies</div>
            </div>
            <div class="F-step2-tile-div">
                <img class="F-step2-img" src="imgs/types/single.png">
                <div class="F-step2-und-img-ribn">Copper Patch Cable</div>
            </div>
        </div>
        </div>
...