JQuery несколько слайд-шоу с теми же предыдущими/последующими кнопками

Question

Я пытаюсь найти разочарующую проблему.

Что я сейчас:

• Один ul содержащие два li, каждый из которых содержит один 3x3 table.
• Скриншот jQuery "слайд-шоу", чтобы показать один table сразу.
• Два div с каждой стороны от table (используется для «слайд-шоу», prevButton и nextButton).
• Нажав на td, «разворачивается» конкретное div, охватывающее все 3x3 table (prevButton и nextButton все еще видно).
• Нажав на расширенный div, он закрывается, и table снова виден.
• Если нет div, а table видна, nextButton и prevButton используются для перехода к следующему/предыдущему table.

http://jsfiddle.net/m1djrrj8/

То, что я пытаюсь сделать:

• Когда div расширяется (нажав на td), то table покрыта и nextButton и prevButton следует NOT использовать для перехода к следующей/предыдущей table, а скорее используется для отображения следующего/предыдущего расширенного div.

Шероховатая структура скрипки

Понимание с Скрипки

• Есть две таблицы с 9 клеток (1,2, 3,4,5,6,7,8,9) и (A, B, C, D, E, F, G, H, I), поменяйте местами один на другой, нажав на желтые боковые панели.
• При нажатии на каждую ячейку открывает определенный DIV:
  • (1,2,3,4,5,6,7,8,9) дисплеи (Sq1, SQ2, SQ3, SQ4, SQ5, SQ6, sq2, sq8, sq9)
  • (A, B, C, D, E, F, G, H, I) дисплеи (квадратные, квадратные, квадратные, квадратные, квадратные, квадратные, квадратные, квадратные, sqІ).
• при отображении SQ1 ~ 9 или SQA ~ I, я хотел бы использовать желтые врезки в слайд-шоу SQ1 через SQ9 или SQA через SQI вместо переключения таблиц.

JSFiddle немного длинный, и я извиняюсь за это, но я был бы очень благодарен, если бы кто-то мог помочь мне с этим; Я вырываю волосы!

Answer 1

«.button» запрограммирован на swich между <li>. Поэтому, когда вы нажимаете кнопку prev или следующую кнопку, текущий <li> исчезает, а другой появляется <li>.
Чтобы получить желаемый результат, вы должны изменить логику:

1. Проверяется <div> покрывает таблицу.
   
2. Если да, спрячьте <div> и покажите следующие <div>.