如何通过jQuery基于另一个元素的切换状态隐藏一个CSS元素

Question

长时间潜伏，第一次问问。我通常会在这个伟大的社区找到一些帮助我的东西，但我在这里做得很短。

我有两个元素切换。这些仅在介质屏幕小于600px时可见。第一个是切换菜单可见性的菜单按钮。第二个是搜索栏按钮，用于切换搜索栏的可见性。

当菜单处于活动状态时，它会向活动搜索栏执行一些不需要的操作。由于我不关心菜单处于活动状态时搜索栏是否打开，我想在菜单处于活动状态时隐藏搜索按钮切换。我认为使用jQuery将是最好的选择。我不擅长jQuery。

以下是我一直在玩的一些选择但没有成功。

以下是我对jQuery的看法：

 jQuery(document).each(function($){
    if($('.menu-toggle').css('display') === 'none') {
       $('.search-toggle').hide();
      }
 });

对于CSS：

@media screen and (max-width: 600px) {
    .search-toggle {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 0;
        padding-top: 15px;
    }
    .menu-toggle {
        display: block;
        height: 3.75em;
        padding: 0 1em;
        font-weight: normal;
        font-size: 12px;
        text-decoration: none;
        line-height: 3.75em;
        margin: 0 auto;
        /*button style*/
        background: none;
        border: none;
        box-shadow: none;
        text-shadow: none;
        color: #ecf0f1;
        font-size: 12px
    }
    .main-navigation.toggled .nav-menu {
        display: block;
        border-top: 1px solid white;
        background: #1e222b;
    }
    /* Full-Width Menu */
    .main-navigation ul {
        display: none;
        padding-left: 0;
    }
}