Jquery 使用id的筛选器切换不起作用

我有一个导航栏过滤器按钮出现在

最大宽度：767

处。我有一个侧边栏，我想用这个按钮切换。我正试图使用

id

属性来实现这一点。这是我的HTML：

<div class="col-xs-3 sidebar-offcanvas" id="sidebar">
    <div class="content_left"> 
        <span class="expand-collapse-text exp">
            <i class="fa fa-sort-desc"></i>  
        </span>
        <div class="left-title">Speciality</div>
        <div class="content-left1"> 
            <span class="expand-collapse-text exp"> 
                <i class="fa fa-sort-desc"></i>
            </span>
            <div class="left-title">Multi Speciality</div>
            <ul class="left_options list-unstyled">
                <li>
                    <input value="1" id="ca1" class="handleclick" type="checkbox" name="ca">
                    <label for="ca1"><span></span>Heart</label>
                </li>
                <li>
                    <input value="2" id="ca2" class="handleclick" type="checkbox" name="ca">
                    <label for="ca2"><span></span>General</label>
                </li>
                <li>
                    <input value="3" id="ca3" class="handleclick" type="checkbox" name="ca">
                    <label for="ca3"><span></span>Dental</label>
                </li>
                <li>
                    <input value="16" id="ca16" class="handleclick" type="checkbox" name="ca">
                    <label for="ca16"><span></span>Maternity</label>
                </li>
                <li>
                    <input value="17" id="ca17" class="handleclick" type="checkbox" name="ca">
                    <label for="ca17"><span></span>Orthopedic</label>
                </li>
                <li>
                    <input value="18" id="ca18" class="handleclick" type="checkbox" name="ca">
                    <label for="ca18"><span></span>Pediatric</label>
                </li>
                <li>
                    <input value="19" id="ca19" class="handleclick" type="checkbox" name="ca">
                    <label for="ca19"><span></span>Mental Health</label>
                </li>
            </ul> 
            <span class="expand-collapse-text exp"> 
                <i class="fa fa-sort-desc"></i> 
            </span>
            <div class="left-title">Super Speciality</div> 
            <span class="expand-collapse-text exp"> 
                <i class="fa fa-sort-desc"></i> 
            </span>
            <div class="left-title">General</div>
        </div>
    </div>
    <div class="content_left"> 
        <span class="expand-collapse-text exp"> 
            <i class="fa fa-sort-desc"></i>  
        </span>
        <div class="left-title">Charges
            <select name="Charges">
                <option>In Rupees</option>
                <option></option>
            </select>
        </div>
        <div class="content-left1 charges">
            <input type="text" id="amount" readonly>
            <div id="slider-range"></div>
            <br>
            <input type="text" id="amount1" readonly>
            <div id="slider-range1"></div>
        </div>
    </div>
    <div class="content_left"> 
        <span class="expand-collapse-text exp"> 
            <i class="fa fa-sort-desc"></i>  
        </span>
        <div class="left-title">Facilities</div>
        <div class="content-left1 facilities">
            <ul class="left_options list-unstyled">
                <li>
                    <input value="1" id="ca1" class="handleclick" type="checkbox" name="ca">
                    <label for="ca1"><span></span>Ambulance services</label>
                </li>
                <li>
                    <input value="2" id="ca2" class="handleclick" type="checkbox" name="ca">
                    <label for="ca2"><span></span>In House Laboratory</label>
                </li>
                <li>
                    <input value="3" id="ca3" class="handleclick" type="checkbox" name="ca">
                    <label for="ca3"><span></span>Pharmacy</label>
                </li>
                <li>
                    <input value="16" id="ca16" class="handleclick" type="checkbox" name="ca">
                    <label for="ca16"><span></span>Blood Bank</label>
                </li>
                <li>
                    <input value="17" id="ca17" class="handleclick" type="checkbox" name="ca">
                    <label for="ca17"><span></span> ICU</label>
                </li>
                <li>
                    <input value="18" id="ca18" class="handleclick" type="checkbox" name="ca">
                    <label for="ca18"><span></span> Operation Theatre</label>
                </li>
                <li>
                    <input value="19" id="ca19" class="handleclick" type="checkbox" name="ca">
                    <label for="ca19"><span></span> Eye Bank</label>
                </li>
                <li>
                    <input value="20" id="ca20" class="handleclick" type="checkbox" name="ca">
                    <label for="ca20"><span></span> ATM</label>
                </li>
                <li>
                    <input value="21" id="ca21" class="handleclick" type="checkbox" name="ca">
                    <label for="ca21"><span></span> Cafetaria</label>
                </li>
                <li>
                    <input value="22" id="ca22" class="handleclick" type="checkbox" name="ca">
                    <label for="ca22"><span></span>Parking</label>
                </li>
            </ul>
        </div>
    </div>
</div>

---

我想用过滤器按钮切换侧栏。我在侧边栏中使用了

position:absolute

。我不熟悉jQuery，我认为解决方案很简单，只是我不知道如何解决

HTML中id为

filter

的元素在哪里？您没有id为

filter

的元素。如果您这样做了，则缺少带有筛选值的id属性。如果您将

切换
添加到正文中，则可以切换“侧栏”。测试了一下。确保包含jQuery源代码。好的。。已经分类了。我错把身份证标签放错地方了。谢谢大家：）在HTML中id为
filter
的元素在哪里？您没有id为
filter
的元素。如果您这样做了，则缺少带有筛选值的id属性。如果您将
切换
添加到正文中，则可以切换“侧栏”。测试了一下。确保包含jQuery源代码。好的。。已经分类了。我错把身份证标签放错地方了。谢谢大家：）
$(document).ready(function(){
    $("#filter").click(function(){
        $("#sidebar").toggle();
    });
});