切換另一個切換

Question

大家好，我目前正在參加考試項目，並且正在構建移動菜單。 它正在工作，但令人遺憾的是，關閉菜單會切換搜索開關，並在關閉菜單時顯示此div，這很快就會令人討厭。

我的JavaScript是;

$(document).ready(function(){
        $(".search").click(function(){
            $(".searchbar").toggle({ direction: "left" }, 500);
        });

        $(".searchmenu").click(function(){
            $(".searchfieldmenu").toggle({ direction: "left" }, 500);
        });

        $(".hamburger").click(function(){
            $(".mobilenavigation").toggle({ direction: "left" }, 500);
            $(".hamburger").toggle({ direction: "left" }, 500);
            $(".hamburgerclose").toggle({ direction: "left" }, 500);
        });

        $(".hamburgerclose").click(function(){
            $(".mobilenavigation").toggle({ direction: "left" }, 500);
            $(".hamburger").toggle({ direction: "left" }, 500);
            $(".hamburgerclose").toggle({ direction: "left" }, 500);
        });
    });

在這里可以找到當前的工作示例（由於考試規定，我寧願不共用一支筆，但可以隨時檢查！）

https://codepen.io/Puffss/project/editor/DWqbbX/

• 重現問題；
  • 移動視口
  • 75x75 div打開菜單
  • 確保搜索欄（菜單頂部的項）已關閉
  • 關閉菜單，菜單旁邊有50x50格

菜單關閉時，您會在頂部看到搜索欄打開

Answer 1

你的內部鏈接.hamburger和.hamburgerclose有.search類，導致你的第一個事件處理程序被觸發。

請執行下列操作

• 取下.search內部類.hamburger和.hamburgerclose
• 更具體地說：用hide()和show()替換您的toggle() ，以確切了解您的功能

在此處查看工作結果： https : //codepen.io/dvdglth/project/editor/AKjwVX/