Question

我想要实现以下效果：单击“在线设计自定义电缆和订购”按钮时，步骤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>

Answer 1

它应该可以正常使用，但可以在带有点击处理程序的父对象中使用..以避免这种使用

e.stopPropagation()阻止事件从冒泡的DOM树，防止任何父处理程序被通知该事件。

Here is the out for df.info() for both:
<class 'pandas.core.frame.DataFrame'>
Int64Index: 10 entries, 0 to 9
Data columns (total 3 columns):
Type_of_cost    10 non-null object
Total_NHE       10 non-null float64
year            10 non-null int64
dtypes: float64(1), int64(1), object(1)
memory usage: 320.0+ bytes
src_of_payment_cy

<class 'pandas.core.frame.DataFrame'>
Int64Index: 18 entries, 9 to 26
Data columns (total 3 columns):
Type_of_cost    18 non-null object
Total_NHE       18 non-null int64
year            18 non-null int64
dtypes: int64(2), object(1)
memory usage: 576.0+ bytes
src_of_payment_df

$( 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);
    });

});

Answer 2

我认为 $（'。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]

的小提琴链接

使用jquery

2 个答案: