使用jquery修改css值无效

问题描述 投票：0回答：2

我希望达到这样的效果：当我点击“设计自定义电缆和在线订购”按钮时，步骤1的手风琴内容将崩溃，第2步内容将立即展开，但是，在应用jquery后，step2内容赢了“ t立即扩展，第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>
javascript jquery html accordion jquery-ui-accordion
2个回答
0
投票

它应该在正常情况下工作，但它在父级内部有一个点击处理程序..所以要避免这种用法

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>
0
投票

我认为$（'。F-accordion-container-div'）。click（function（）{}）;这个功能在执行“设计自定义电缆和在线订购”按钮点击事件时会产生一些冲突。我做了一些改变希望它会对你有所帮助。

<!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]

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.