Question

每当单击“ toogle-slide”按钮时，我都试图在div之间切换。每次单击切换按钮时，另一只按钮也应隐藏/显示。

html代码：

using EmployeePopover.Models;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web.Mvc;

namespace EmployeePopover.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            List<Employee> employeeList = new List<Employee>();

            using (DBEmployeePopoverEntities db = new DBEmployeePopoverEntities())
            {
                employeeList = db.Employees.ToList();
            }

            return View(employeeList);
        }

        public ActionResult EmployeeDetails(int id)
        {
            using (DBEmployeePopoverEntities db = new DBEmployeePopoverEntities())
            {
                List<Employee> employee = db.Employees.Where(x => x.ID == id).ToList();

                return View(employee);
            }
        }
    }
}

javascript代码：

<div id="divParticipants">
click 'on' to hide the button and show the second content 
</div>
<div id="divPackage" style='display:none'>
click 'off' to hide the button and hide first content 
</div>

<button type="button" id='add-new'>
another button 
</button>

我花了半个小时试图使其工作，但无法使其工作。如果您能展示如何做到，我将不胜感激。这是jsfiddle链接。

https://jsfiddle.net/p9qarjg0/36/

Answer 1

尝试使用切换按钮。

      $(function () {
        $('#package-toogle').on('change', function () {
            $('#divParticipants').toggle("slide", { direction: "right" }, 400, function () {
            });

            $('#divPackage').toggle("slide", { direction: "left" }, 400, function () {
            });
          $('#add-new').toggle();
        })
    });

每次单击一次太滑时如何滑动div并显示不同的内容？

1 个答案: