jquery - 如何在使用切换时通过单击其他元素来隐藏元素？

Question

下面的 fiddle 有两个问题: https://jsfiddle.net/vitordhers/cwpgL94o/2/

我将下面的代码用作脚本:

<script>
$(function() {
    $("#option1").click(function () {
        $("#p1").toggle(500);
    });
});
$(function() {
    $("#option2").click(function () {
        $("#p2").toggle(500);
    });
});
$(function() {
    $("#option3").click(function () {
        $("#p3").toggle(500);
    });
});
</script>

1st:我需要在页面加载后立即显示#p1，因为选择了#option1。这怎么可能？;

第二:当我点击除#option1 之外的其他元素时，#p1 如何隐藏自己？

我一直在尝试使用 jquery，因为它比 javascript 更简单，请帮助我。提前致谢

Answer 1

您可以尝试使用这个小代码:

$(function() {
    $("#opt").click(function () {
        var txt = $("#opt").find(":selected").text();
        $("#selected").text(txt);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="opt" mutiple size="3">
<option id="option1" selected> Option 1</option>
<option id="option2"> Option 2</option>
<option id="option3"> Option 3</option>
</select>

<p id="p">Thanks for choosing  
    <span id="selected">Option 1</span>
</p>