如何讓div在按鈕點擊時在最接近的div下褪色？

好的，所以我在每個div中都有相同的按鈕。點擊時，我想讓Div4出現在用戶按下按鈕的div下。因此，例如，如果用戶按下Div2內的Button，則Div4會出現在Div2和Div3之間。它會推動Div3而不是出現在/隱藏Div3。如何讓div在按鈕點擊時在最接近的div下褪色？

這是如何實現的，希望通過jQuery來實現？

謝謝。

$('#Button').click(function() { 
 
    $('#Div4').fadeIn(200); 
 
});

body { 
 
    color: white; 
 
    text-align: center; 
 
} 
 
#Button { 
 
    width: 40px; 
 
    height: 20px; 
 
    background: brown; 
 
    cursor: pointer; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#Div1 { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: blue; 
 
} 
 
#Div2 { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: green; 
 
} 
 
#Div3 { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: purple; 
 
} 
 
#Div4 { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div id="Div1"> 
 
    Div1 
 
    <div id="Button">Click</div> 
 
    </div> 
 
    <div id="Div2"> 
 
    Div2 
 
    <div id="Button">Click</div> 
 
    </div> 
 
    <div id="Div3"> 
 
    Div3 
 
    <div id="Button">Click</div> 
 
    </div> 
 
</body>

來源

2015-05-19 Neo

有沒有'Div4'在你的HTML。 – Barmar

這裏是一個可能的解決方案：http://jsfiddle.net/2nxd6fon/7/

代替相同的ID爲div的（這是不正確的做法），如下所示使用類，

[如我沒有在你的HTML中看到Div4，我採取了以下方法。]

<body> 

    <div id="Div1"> 
     Div1 
     <div class="button">Click</div> 
    </div> 
    <div id="Div2"> 
     Div2 
     <div class="button">Click</div> 
    </div> 
    <div id="Div3"> 
     Div3 
     <div class="button">Click</div> 
    </div> 
</body> 

var div4Content = '<div id="Div4">'+ 
    'Div4'+ 
    '<div class="button">Click</div>'+ 
    '</div>'; 

$('.button').click(function() { 
    $(this).parent().after(div4Content); 
});

來源

2015-05-19 21:19:08

首先，ID必須是唯一的，您不能重複id="Button"。你應該使用一個類。

您可以使用.after()當前DIV後移動#Div4，然後淡化它。

$('.Button').click(function() { 
 
    $(this).parent().after($('#Div4').fadeIn(200)); 
 
});

body { 
 
    color: white; 
 
    text-align: center; 
 
} 
 
.Button { 
 
    width: 40px; 
 
    height: 20px; 
 
    background: brown; 
 
    cursor: pointer; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
#Div1 { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: blue; 
 
} 
 
#Div2 { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: green; 
 
} 
 
#Div3 { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: purple; 
 
} 
 
#Div4 { 
 
    width: 100px; 
 
    height: 50px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div id="Div1"> 
 
    Div1 
 
    <div class="Button">Click</div> 
 
    </div> 
 
    <div id="Div2"> 
 
    Div2 
 
    <div class="Button">Click</div> 
 
    </div> 
 
    <div id="Div3"> 
 
    Div3 
 
    <div class="Button">Click</div> 
 
    </div> 
 
    <div id="Div4"> 
 
    Div4 
 
    </div> 
 
</body>

來源

2015-05-19 21:23:10 Barmar

如何讓div在按鈕點擊時在最接近的div下褪色？

回答

相關問題