使用Javascript在div元素之间切换

我的网站有3个服务，我想能够点击服务1，看到菜单1，点击服务2，看到菜单2，点击服务3，看到菜单3。我有下面的代码，但它没有按预期工作。当我单击服务2和服务3时，没有显示任何内容

HTML:

<div class="row" id="menu_service1">
    <div class="col-md-4">
        <span><h5>Choose a line</h5> <select id="lines" class="form-control"></select></span> 
        <span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
    </div>
</div>

<div class="row" id="menu_service2">
    <div class="col-md-4">
        <span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span> 
        <span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
    </div>
</div>

<div class="row" id="menu_service3">
    <div class="col-md-4">
        <p>blah</p>
    </div>
</div>

$(document).ready(function() { 
    var line_array = ["Line 1", "Line 2", "Line 3"];
    var stops = ["stop1", "stop2", "stop3"] ;

    for (var i = 0; i < line_array.length; i++) {
        $('#lines').append('<option>' + line_array[i] + '</option>');
    }

    for (var i = 0; i < stops.length; i++) {
        $('#stop').append('<option>' + stops[i] + '</option>');
    }

    $('#menu_service1').hide();
    $('#menu_service2').hide();
    $('#menu_service3').hide();

    $('#Service_1').click(function() {
        $('#menu_service1').toggle();
    });

    $('#Service_2').click(function() { 
        $('#menu_service2').toggle();
    });

    $('#Service_3').click(function() { 
        $('#menu_service3').toggle();
    });
});

选一行
选择一站
选择一站
选择一站
废话

JS:

<div class="row" id="menu_service1">
    <div class="col-md-4">
        <span><h5>Choose a line</h5> <select id="lines" class="form-control"></select></span> 
        <span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
    </div>
</div>

<div class="row" id="menu_service2">
    <div class="col-md-4">
        <span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span> 
        <span><h5>Choose a stop</h5> <select id="stop" class="form-control"></select></span>
    </div>
</div>

<div class="row" id="menu_service3">
    <div class="col-md-4">
        <p>blah</p>
    </div>
</div>

$(document).ready(function() { 
    var line_array = ["Line 1", "Line 2", "Line 3"];
    var stops = ["stop1", "stop2", "stop3"] ;

    for (var i = 0; i < line_array.length; i++) {
        $('#lines').append('<option>' + line_array[i] + '</option>');
    }

    for (var i = 0; i < stops.length; i++) {
        $('#stop').append('<option>' + stops[i] + '</option>');
    }

    $('#menu_service1').hide();
    $('#menu_service2').hide();
    $('#menu_service3').hide();

    $('#Service_1').click(function() {
        $('#menu_service1').toggle();
    });

    $('#Service_2').click(function() { 
        $('#menu_service2').toggle();
    });

    $('#Service_3').click(function() { 
        $('#menu_service3').toggle();
    });
});

$（文档）.ready（函数（）{
变量行数组=[“第1行”、“第2行”、“第3行”]；
var stops=[“stop1”、“stop2”、“stop3”]；
对于（变量i=0；i

---

id

在同一文档中应该是唯一的，因此尝试用通用类替换重复的，例如：

<span><h5>Choose a line</h5> <select class="form-control lines"></select></span> 
<span><h5>Choose a stop</h5> <select class="form-control stop"></select></span>

您还应该通过添加id选择器sogn

#

来修复以下两行中的打字错误：

应该是：

$('#menu_service2').toggle();
$('#menu_service2').toggle();

您还可以对多个选择器使用逗号

，

分隔符，而不是：

$('#menu_service1').hide();
$('#menu_service2').hide();
$('#menu_service3').hide();

仅使用：

$('#menu_service1,#menu_service2,#menu_service3').hide();

希望这有帮助

---

$（文档）.ready（函数（）{
变量行数组=[“第1行”、“第2行”、“第3行”]；
var stops=[“stop1”、“stop2”、“stop3”]；
对于（变量i=0；i

服务1
服务2
服务3
选择一行1
选择一个站点1
选择一行2
选择一个站点2
废话


id
在同一文档中应该是唯一的，因此尝试用通用类替换重复的，例如：

<span><h5>Choose a line</h5> <select class="form-control lines"></select></span> 
<span><h5>Choose a stop</h5> <select class="form-control stop"></select></span>

您还应该通过添加id选择器sogn
#
来修复以下两行中的打字错误：

应该是：

$('#menu_service2').toggle();
$('#menu_service2').toggle();

您还可以对多个选择器使用逗号
，
分隔符，而不是：

$('#menu_service1').hide();
$('#menu_service2').hide();
$('#menu_service3').hide();

仅使用：

$('#menu_service1,#menu_service2,#menu_service3').hide();

希望这有帮助



$（文档）.ready（函数（）{
变量行数组=[“第1行”、“第2行”、“第3行”]；
var stops=[“stop1”、“stop2”、“stop3”]；
对于（变量i=0；i

服务1
服务2
服务3
选择一行1
选择一个站点1
选择一行2
选择一个站点2
废话

您忘记了选择器中id前面的#符号

$('#menu_service2').toggle();
$('#menu_service3').toggle();

您忘了在您的选择器中id前面的#符号

$('#menu_service2').toggle();
$('#menu_service3').toggle();

我更喜欢少写几行代码来获得相同的结果


$（函数（）{
变量行数组=[“第1行”、“第2行”、“第3行”]；
var stops=[“stop1”、“stop2”、“stop3”]；
对于（变量i=0；i

服务1
服务2
服务3
选一行
选择一站
选择一站
选择一站
废话

我宁愿写更少的代码行来获得相同的结果


$（函数（）{
变量行数组=[“第1行”、“第2行”、“第3行”]；
var stops=[“stop1”、“stop2”、“stop3”]；
对于（变量i=0；i

服务1
服务2
服务3
选一行
选择一站
选择一站
选择一站
废话

id
在同一文档中应该是唯一的。
服务1
服务2
和
服务3
元素
id
在同一文档中应该是唯一的。
服务1
服务2
和
服务3
元素在哪里，如果我依次单击服务1和服务2，这两个菜单就会相互添加。我有办法解决吗？只是不高兴