Jquery菜单-切换子菜单区域和父菜单按钮上的css状态更改

如果这很简单或者我没有抓住要点，我会道歉

通过搜索stackoverflow，我结合了两段非常有用的代码，但我得到了一个奇怪的结果

我有一个带有3个父按钮的菜单-每次单击其中一个按钮时，我希望它打开一个子导航框并更改父菜单项的css状态。我希望这样可以切换回下一次单击或单击另一个父菜单项时

下面的内容将切换子导航框的打开/关闭，但会切换未单击的父菜单（与我想要的相反！）。我想我离得很近，但离得很远！以下是我所拥有的：

jquery：

$(window).load(function(){
$(".shownavsection").click(function () {
var cls = this.className.match(/link1|link2|link3/),
    box = $(".section."+cls[0]);

// slideUp() on all .countries elements
$(".section").not(box).slideUp();

box.slideToggle();   

$(".arr").not($(this)).toggleClass("on");
;
return false;


});
});//]]>  

CSS

HTML

1.
2.
3.

---

感谢您的帮助

使用下面的代码-您必须使用和

$(window).load(function(){    
    $(".shownavsection").click(function () {
    var cls = this.className.match(/link1|link2|link3/),
        box = $(".section."+cls[0]);
        $(".shownavsection").not(this).removeClass("on"); // UPDATED LINE
        $(this).toggleClass("on");                      // UPDATED LINE
        $(".section").not(box).slideUp();
        box.slideToggle();   
        return false;
    });
});

$(window).load(function(){    
    $(".shownavsection").click(function () {
    var cls = this.className.match(/link1|link2|link3/),
        box = $(".section."+cls[0]);
        $(".shownavsection").not(this).removeClass("on"); // UPDATED LINE
        $(this).toggleClass("on");                      // UPDATED LINE
        $(".section").not(box).slideUp();
        box.slideToggle();   
        return false;
    });
});

更新的答案：-**请参阅上面的代码**“更新行”了解与您的第二个相关问题-如果用户连续单击两次，它将从链接中删除“CLS”上的

把它放在一把小提琴（jsfiddle.net）里，也许我们可以帮你修好。为杰夫干杯——之前没有注册——几分钟后回来。谢谢。Jsfiddle链接：Prog非常感谢。有一件事我应该提到——在连续两次单击“链接1”之后，是否有可能删除“on”类？如果不是谢谢你，你是宝石！我如何确认“接受”？看不到按钮-抱歉。@Huckerby-当然，这是您的解决方案-如果用户在同一
链接上连续单击两次
-请查看上面的更新答案。进步-谢谢-您真的帮我解决了问题-我可以“给您买杯啤酒”吗@Huckerby-您将在下方的
向上
和
向下
投票按钮上找到
接受
按钮-它将帮助其他人找到正确的解决方案
$(window).load(function(){    
    $(".shownavsection").click(function () {
    var cls = this.className.match(/link1|link2|link3/),
        box = $(".section."+cls[0]);
        $(".shownavsection").not(this).removeClass("on"); // UPDATED LINE
        $(this).toggleClass("on");                      // UPDATED LINE
        $(".section").not(box).slideUp();
        box.slideToggle();   
        return false;
    });
});